0

Our static content server is serving images for various web portals (black box for me). On web portal all images are coming fine even though they are from different domain (assuming static server sets http headers accordingly). However if I try to access same image using browser console via ajax calls (using jquery or xmlhttp) it gives cross domain call failure error (i.e. request is successful but browser denied response). Below is a simple jsfiddle to show the problem

JSfiddle for image coming in dom but ajax call failing 

/*Image tag works fine*/
<img src='https://casinogames.bwin.com/htmllobby/images/gameicon/melonmadness.jpg' /> 
/*ajax call fails*/

var a = $.ajax(' https://casinogames.bwin.com/htmllobby/images/gameicon/melonmadness.jpg');

I verified request/response headers and they are exactly same in both scenarios. I want to know if there is any specific difference between request from image tag and ajax? I tried both IE console and Chrome console and same results.

Nitin Agrawal
  • 1,341
  • 1
  • 10
  • 19

2 Answers2

2

I want to know if there is any specific difference between request from image tag and ajax?

There won't be anything significantly different about the request, but either way you do it, the browser will not make the image data available to JavaScript when the request is a cross-origin one.

Displaying an image to the user from an img element is not a security risk.

Giving JavaScript written by a third party access to data from another server is a security risk.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks a lot. "Displaying an image to the user from an img element is not a security risk. Giving JavaScript written by a third party access to data from another server is a security risk." This clarifies my doubt. – Nitin Agrawal Sep 17 '14 at 09:13
0

You cannot make ajax calls from different domain in normal ways.

here is a discussion about it.

You can look it up as "cross domain ajax calls"

Edit

Show remote img via jquery like...

var a = $('img').prop ('src', 'http://placehold.it/10x10');
Community
  • 1
  • 1
Azadrum
  • 756
  • 6
  • 23
  • I understand how to work with cross domain calls using both approaches of JSONP (specifcally for json data) and CORS (using Access-control-allow-origin). However my question is more specific to a scenario when request is working fine from html but not with ajax. There are no differences in the request/response headers. In this scenario how Browser is able to differentiate between call from html and call from javascript? – Nitin Agrawal Sep 16 '14 at 07:02
  • If you just want to show image via javascript. You can create an img tag and set its src value via javascript. – Azadrum Sep 16 '14 at 10:17
  • Hi Azadrum, my question was not how to do it...but the real question was why browser behaves in this way....Please read answer by Quentin above which makes perfect sense for the doubt. Anyway thanks for your help – Nitin Agrawal Sep 17 '14 at 09:16