javascript html5 drawImage with image from a different domain

Question

So I have the following code:

var element = document.getElementById("myCanvas");
var width = element.width;                                   
var height = element.height;  
var context = element.getContext("2d");                      

/* test 1 */
var img1 = new Image(width, height);
img1.src = "http://www.mydomain.com/image.jpg";

document.body.appendChild(img1);          // <-- A: this works 
context.drawImage(img1,0,0,width,height); // <-- B: this works

/* test 2 */
var img2 = new Image(width, height);
img2.src = "http://www.notmydomain.com/image.jpg";

document.body.appendChild(img2);          // <-- C: this works 
context.drawImage(img2,0,0,width,height); // <-- D: this does not work

Okay so looking at my code, in test 1 I create an image object with a picture that is hosted on the same domain as my page. From A: I can see that it is loaded fine ( A: and C: are just thrown in as tests to make sure img object loaded proper). And B: works as well, it draws the image to my canvas.

In test 2 , I load an image that is hosted on a domain that is different from the my page's domain. C: works fine, and I know you are allowed to load images hosted on other domains. However, D: does not work. I get the following error:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: ....

Which from my understanding means this is counted as cross-site scripting.

So here are the questions:

1) Why is this considered cross-site scripting? I mean, I know why ...but why is D: not allowed, when C: is? IMO they are sort of the same thing in principle/spirit?

2) Is there a way to get around this, other than traditional cross-site scripting workarounds? I think I'm going to have to use AJAX to pass the URL to a server-side script and make the request and then either save the image on the server and return a URL to it so that it is on the same domain, or else (I think) I can return the raw base64 encoded data and use the canvas methods to build it from the raw data. I can live with doing either of these things but...I'm sort of hoping maybe I'm missing something about html5/canvas stuff (I'm new to it!)

Answer 1

Hold it. Something else is going on here.

You can absolutely draw images from a different domain.

Here's code at jsfiddle drawing an image from placekitten.com:

http://jsfiddle.net/ZZW5V/

You should try replacing the url in that fiddle code with the url of the notyourdomain image. It should still work.

In general you should always be able to draw images onto a canvas from anywhere that you're able to fetch them successfully from.

What you're not allowed to do, after that point, is get the imageData or save the canvas to a PNG with toDataUrl . There are important security reasons why that's not allowed.

My guess is that you're doing something to violate one of the security rules and not just trying to draw the image.

Answer 2

This is a security measure to prevent information being 'stolen'. It's the same reason you can't use AJAX to get a page from another domain.

For example, say a banking website used images to display credit information. Your code could load that image into the page, then send it to your server, thus stealing the client's secure information. It's an extreme example, but a valid one.

You can append the image to the page because you can't get any information from it. You can't load the image into your javascript, because you then have the raw image data available to manipulate and transfer.