0

I'm trying to get the pixels from a canvas, but when I do that I get the following error in chrome:

VM244:724 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

enter image description here

Why does this give a security error ? But most importantly is there a way to tell chrome to ignore this security error (I'm only doing this on my machine!)

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333
  • 1
    Have you tried using this switch `--allow-file-access-from-files` for chrome? Be good if you could show actual code - it's maybe going to make a difference to the answer. If you're retrieving from a local web app that you can control, add the following header: `Access-Control-Allow-Origin: *` – Tibrogargan May 21 '16 at 23:29
  • Oh, sorry for that. If you go, as an example, to http://agar.io and start playing, you can produce the same error as shown in the screen shot. Furthermore I assume that the `allow-file-access-from-files` can be set in `chrome://flags`, right ? I'm using chrome 50, and I can't find anything close to that setting (I don't start chrome from the command line) – Jeanluca Scaljeri May 22 '16 at 06:45
  • Be nice if they added it, but right now it's a command line option - but you can set command line in the system's command line – Tibrogargan May 22 '16 at 06:49
  • ok, so I tried `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files` but I still get the error. Is this the right way to run chrome with args from the command line ? – Jeanluca Scaljeri May 22 '16 at 07:02
  • ignore the chrome options and go with the linked duplicate. Since this is canvas tainting I'm not sure chrome is going to treat it as a file:// url anyway. – Tibrogargan May 22 '16 at 07:18
  • That post doesn't answer my question. I don't want to fix the problem, I simply want to disable it locally only – Jeanluca Scaljeri May 22 '16 at 07:34
  • You can"t disable it, all you can do is fix the original document so it includes the correct CORS headers – Tibrogargan May 22 '16 at 07:49
  • But I can't manipulate the headers from http://agar.io for example, so what would be a possible solution? – Jeanluca Scaljeri May 22 '16 at 07:55
  • Getting image data locally is not the same as getting it from agar.io. it does not matter if the page is being run locally, the image data is **not** local so the cross domain policy applies. If agar.io does not have the correct headers you won't be able to use their data – Tibrogargan May 22 '16 at 07:58
  • Sorry, I was not very clear, but with local I mean that it is fine if it only works on my machine (for development). Other people are indeed asking similar questions, but they are building some kind of site which incorporate something external canvas – Jeanluca Scaljeri May 22 '16 at 08:09
  • Does it help if I would use a proxy which sets `Access-Control-Allow-Origin: *` on all responses – Jeanluca Scaljeri May 22 '16 at 08:49

0 Answers0