javascript - Why can't I force download of tainted canvas and why is it a security issue?

Question

Why can't I force download of tainted canvas and why is it a security issue?

Take this example situation: On example.com (example of my domain) I can download a JSON file and read it.

I can load an image with a src from example.org (example of someone else's domain). I can draw that image to a canvas(at which point it becomes tainted), and I can still draw on top of that canvas.

A visitor to my page can right click on that canvas and save image as.

Is the taint just to stop the image data getting into the JavaScript?

Why is it OK for data (JSON) and not OK for images?

In JavaScript I can automatically start a download of a canvas by converting to data URL, making a link element and making the JavaScript click it.

Is there a way to achieve the same result without a "security issue", I want to automatically download the canvas just like if the user had right click "save image as" I don't need the image data in the JavaScript. As it just draws a diagram on top of a canvas that has been tainted by a base image from another domain.

Answer 1

It is solely related to security (and is not related to copyright). We can see from this article that the main intent of cross-origin restriction is:

The principal intent for this mechanism is to make it possible for largely unrestrained scripting and other interactions between pages served as a part of the same site (understood as having a particular DNS host name, or part thereof), whilst almost completely preventing any interference between unrelated sites.

And a few paragraphs down (my emphasis):

In theory, the model seems simple and robust enough to ensure proper separation between unrelated pages, and serve as a method for sandboxing potentially untrusted or risky content within a particular domain [...]

The article doesn't mention canvas in particular but for canvas it has to do with for example grabbing content currently displayed in a tab (different origin) and send it back to a malicious third party which then can see the content (e.g. things like bank statements, some account information and the sort - in theory anyways).

MDN generalizes this type of attacks this way:

This protects users from having private data exposed by using images to pull information from remote web sites without permission.

But for different origin server where this poses no risk they may allow cross-origin use which is why in some cases we can request this adding the attribute/property crossOrigin = "anonymous" to the image tag/element.

We can in either case display and do things like transformations to images in canvas even if it is tainted, but if tainted we cannot pull any data or read pixel information from it using getImageData(), toDataURL() or toBlob().

Avoiding restrictions

To avoid this restriction from other sites you would have to set up a page proxy which would do the image request on your page's behalf, then serve it to your page without any restriction. This of course adds to bandwidth as well as load-time.

The other way is to simply upload the image to your own server or to a server setup to allow cross-origin use. In this case you would not be able to use it as a security attack surface, but you could yourself be targeted for infringement violation depending on Fair-Use, license and such (otherwise unrelated to CORS itself).

The CORS specification can be found here.