1

If an image from another site, is loaded to a page, and then written to canvas as a partial ingredient in a composite, using:

context.drawImage(image, 0, 0, w, h);

it would seem anything insecure would already have occurred on the draw to the canvas. Why then would 

window.location = canvas.toDataURL('image/png');

present an error message. SECURITY_ERR; DOM Exception 18. It doesn't seem any more insecure than the extra step of saving the external site image elsewhere first.

My question is not how to get around this, so much, or what the error means, but rather,

Why is this insecure? If the page is loaded by the server the action is surely expected by the author.

datatoo
  • 2,019
  • 2
  • 21
  • 28
  • Are you loading the web page from the file system? If so, a number of conditions seem to trigger Exception 18 from local file system that don't from actual web site: http://stackoverflow.com/questions/2704929/uncaught-error-security-err-dom-exception-18. – jfriend00 Sep 02 '11 at 05:33
  • I did experience that, but even running on localhost, (as I had read in the same link) I still get the same exception with an external image url. – datatoo Sep 02 '11 at 06:08

1 Answers1

5

As per the spec, information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images on another origin. The worry is that a malicious app could deduce information that it otherwise wouldn't have access to by loading in an image from another domain/origin (easily done with images) and reading the pixel content. XHR has protections built in place to prevent XD leakage. Images do not.

sid
  • 152
  • 3
  • 12
ebidel
  • 23,921
  • 3
  • 63
  • 76
  • absolutely correct. It might also be helpful to mention that canvases drawn with any images from another domain are considered "dirty" in which the canvas's origin-clean flag is false. Canvases that are drawn dynamically and contain only images from the same domain are classified as "clean" canvases. – Eric Rowell Oct 11 '11 at 17:37