5

I'm using HTML5 canvas and the .toDataURL() function through KineticJS's .toDataURL() method. The canvas uses images that my users uploaded to the site, which are stored on a different machine and subdomain farm1.domain.com.

Problem: When .toDataURL() is called, I get the error

SECURITY_ERR: DOM Exception 18

Is there a way around this? I also get the same problem if the user access the page via domain.com and the image is hosted at www.domain.com.

Attempt:

I added the following lines to httpd.conf within virtualhost and restarted the apache service.

Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"

I still get the same error when accessing image hosted on www.domain.com from page on domain.com! Is there a way around this in KineticJS?

Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
  • Possibly a repeat of: http://stackoverflow.com/questions/9344548/security-error-with-canvas-todataurl-and-drawimage?rq=1 and http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception – Matt Greer Jan 15 '13 at 01:05
  • duplicate and was answered, look at the related in right column, and here is the [spec](http://www.w3.org/TR/2011/WD-html5-20110405/the-canvas-element.html#security-with-canvas-elements) – antejan Jan 15 '13 at 01:07
  • I guess the origin-clean flag must be set to true to avoid the error? Can this be done in KineticJS? – Nyxynyx Jan 15 '13 at 01:40
  • This seems to work in Chrome 45, i'm only having issues in Safari 9 – dviramontes Oct 06 '15 at 18:18

2 Answers2

1

You will need to add the Access-Control-Allow-Origin headers to the images you are loading, not to the page which is loading them. For details on this header, and on CORS in general, you may want to read "CORS isn't just for XHR", which specifically discusses this issue.

0

There is no way around this error. Images loaded in a canvas from a different domain will raise this error as currently implemented by every browser. In your case the images should be stored in the same domain and you would not be getting exceptions.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100