Reputation: 11545
First I tried to get the image normally with onload event etc, but canvas doesn't let me export it because it's "Tainted" or whatever.
So then I tried to get the image like the browser does (GET request), but it still doesn't let me get the data
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function(e){
if(this.status == 200){
do things
}
};
xhr.send();
I don't understand why does this security limitation thing exists, if the browser can access the image directly? Isn't that the same thing as me getting the image data with javascript?
Upvotes: 0
Views: 60
Reputation: 943563
So then I tried to get the image like the browser does (GET request),
Canvas and XMLHttpRequest both use CORS to have permission to access data across different origins. The server you are requesting the data from must set CORS headers to grant that permission.
I don't understand why does this security limitation thing exists, if the browser can access the image directly? Isn't that the same thing as me getting the image data with javascript?
Accessing the image directly will display the image to the user.
Accessing the image with JavaScript will allow the author of the site to do whatever they like with the image data, including copying it to their own server.
The image might contain data that Joe Random Website shouldn't be able to copy (e.g. http://financial.intranet/my/secret/company/financial/chart.png
) just by asking their visitors' browsers to get it instead of getting it directly.
That data might be protected by IP checking, network routing, HTTP Auth, Cookies, or a host of other security restrictions that the browser can be set up for. If any site can get their visitors' browsers to make requests on their behalf, then any site can impersonate any one of their visitors and get access to secrets.
Upvotes: 2