javascript - What are security concerns around use of canvas.toDataURL?

Question

What security threads would canvas.toDataURL generate in general? What measures we have to take to make use of it secure and thread free to our website?

In the following links there are discussions around security error that .toDataURL raises if the image is not hosted locally, but why is that?

canvas.toDataURL() causing a security error Capture HTML Canvas as gif/jpg/png/pdf?

Answer 1

You may be aware of the same-origin policy. In essence, it's a security mechanism employed by browsers to make sure that only scripts that originate from the same site that the user is visiting are allowed to run without restrictions and access the DOM.

You could disguise a script as an image, for example you could store each group of 4 characters in the script in a pixel (one byte per channel), then read the pixels of that image to reconstruct the script.

This is why the same-origin policy applies to images too: if you draw images from a different domain into a canvas on your web page, there is a limit to what you can do with your canvas if you have drawn cross-origin images into it. For example, you can't inspect its pixels.

Now imagine that you could use canvas.toDataURL() to generate a data url from your cross-origin canvas. While your browser knows that your canvas contains cross-origin content, a data URL is just that: a URL. So there is no sure way of knowing that it has originated from a different domain in some way, and it could be potentially used to bypass the whole same-origin thing. As an example, you could create a new img and use the data URL as its src.