This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.

Join us in building a kind, collaborative learning community via our updated
Code of Conduct.

If an attacker is able to guess the name of a picture that you have in a private site, he would be able to get a copy of it by painting in on a canvas and sending the new image to his site. The main restriction from my point of view is to avoid drawing the contents of another site, but security is too complex as the attacker can find a hole in any unexpected site.
– AlfonsoMLMar 5 '10 at 23:46

3

Note that the subdomain matters as well. In my experience, in Chrome at least, a SECURITY_ERR: DOM Exception 18 is raised when making a call that is perceived to be across subdomains: 1. in example.com/some/path/index.html for a video or image in foo.example.com 2. when going to the same page as in 1 but by entering the URL example.com/some/path/index.html and then attempting to call toDataUrl() for a video or image in www.example.com
– Sam DuttonJun 25 '10 at 6:08

3

@AlfonsoML, maybe I'm wrong, but "If an attacker is able to guess the name of a picture that you have in a private site" probably he will grab the image with a curl non with a browser. My point of view: Public URL Public Content.
– kiliancJan 25 '12 at 16:24

4

@pop850 I'm facing this issue even when I use a data URL. Is there a way that I can workaround this for data URLs?
– SujayJun 19 '12 at 17:13

3

@kilianc This restriction exists to prevent an attacker from causing your browser (with authentication cookies) to fetch an image and send its contents to an attacker; the attacker doesn't have your cookies, so he can't use curl to get the same resources you are authorized to get. "Public URL, Public Content" is a rather flawed way of thinking: my Facebook page has public facing components, but there is much that is only accessible with the right authentication token.
– apsillersAug 6 '13 at 14:46

Your other option is for your server to have an endpoint that fetches and serves an image. (eg. http://your_host/endpoint?url=URL)
The downside of that approach being latency and theoretically unnecessary fetching.

If there are more alternate solutions, I'd be interested in hearing about them.

Hi, I did just that, I have Access-Control-Allow-Origin: * on the images, I have crossorigin='anonymous', then I paint the image on canvas, then I call toDataUrl and I'm still getting the SECURITY_ERR: DOM Exception 18
– skratJul 11 '12 at 14:45

All right, use setAttribute instead of img.crossorigin
– skratJul 11 '12 at 15:33

I had the same problem and all the images are hosted in the same domain... So, if someone is having the same problem, here is how I solved:

I had two buttons: one to generate the canvas and another one to generate the image from the canvas. It only worked for me, and sorry that I don't know why, when I wrote all the code on the first button. So when I click it generate the canvas and the image at the same time...

I always have this security problem when the codes were on different functions... =/

My guess is that image is on a different server than where you're executing the script. I was able to duplicate your error when running it on my own page, but it worked fine the moment I used an image hosted on the same domain. So it's security related - put the image on your site. Anyone know why this is the case?

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).