11

I'm having a problem with my Javascript implementation. The script will run in Firefox but in Chrome it says:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. index.html:1
Uncaught Error: SecurityError: DOM Exception 18

Does anyone have an idea of what the cause for such inconsistent behaviour could be?

AndroidHustle
  • 1,794
  • 5
  • 24
  • 47
  • 1
    The canvas is considered "tainted" if the image comes from a different domain than the main page. You didn't post the image URLs so it's impossible to say exactly what's happening to you. – Pointy Apr 25 '13 at 14:34
  • 2
    Thanks Pointy. The URL's are just the local file names, since the image files are in the same folder as the index file. The weird thing though is that it works with no problem in Firefox but Chrome has out of the blue started nagging. – AndroidHustle Apr 25 '13 at 14:42

1 Answers1

12

Chrome does not consider different local files to be sourced from the same domain. That is, each local file you reference via a file:// URL is treated as if it comes from a unique domain separate from that of other file:// URLs. That they're in the same directory makes no difference.

You can start Chrome with an option ("--allow-file-access-from-files" I think) that tells it to treat local files as all being from a common domain.

MMM
  • 7,221
  • 2
  • 24
  • 42
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • thanks for your input! I found [this post](http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas) based on what you wrote. I must admit though that I'm not entirely sure how the URL should be formatted... (I'm not very good at this). The URL I run with now: **file:///C:/Users/Max/Dropbox/Web%20projekt/Shalette/index.html**. How should this then be adjusted? Trying to put: **http://localhost//C:/Users/Max/Dropbox/Web%20projekt/Shalette/index.html** just starts some process in the Chrome console and not much more. Any info you can give me is greatly appreciated! – AndroidHustle Apr 25 '13 at 15:17
  • 1
    @AndroidHustle Either you must use the `--allow-file-access-from-files` command-line flag, or your content must be served from a Web server over HTTP using the `http:` (or `https:`) scheme. – apsillers Apr 25 '13 at 15:23
  • @apsillers Thanks, I'm sorry but I have to ask, where is this command line? I don't see anything on how to open it in Chrome when I search for it. Plus I don't see anything that looks like a command line in Chrome when I look in the Console. – AndroidHustle Apr 25 '13 at 15:41
  • 1
    @AndroidHustle Assuming you're using Windows: edit a shortcut to "`chrome.exe`" to be for "`chrome.exe --allow-file-access-from-files`" instead, as detailed in [this eHow article](http://www.ehow.com/how_7208987_add-line-parameter-windows-shortcut.html). – apsillers Apr 25 '13 at 15:47
  • @apsillers I can't believe that actually worked. Thanks so much! What I still don't understand though is that it did actually work previously. Then I did some changes in the code, the problem appeared, and I tried to backtrack and erase my changes. When I had backtracked quite a lot, and the problem still existed, I thought there were some problem with the browser (which there was apparently) and true enough it worked in Firefox. I just don't understand how the problem occurred out of nowhere. I don't expect you to do either though. Thanks a lot for your help in either case! – AndroidHustle Apr 25 '13 at 16:08