HTML5 Canvas getImageData - Security Issue

Question

I am building a web app which reads an image through the FileReader API, and then displays it on a Canvas. After that, I re-color the image by going pixel-by-pixel after making the .getImageData call on the canvas, as shown below:

// Color Image on Canvas
ctx = document.getElementById('my_canvas').getContext('2d');
var img_px = ctx.getImageData(0,0,canv_w,canv_h);
img_px = colorImage(img_px,red,green,blue);
ctx.putImageData(img_px,0,0);

colorImage() is a function I've written that changes the pixel values given a corresponding RGB color code, and it definitely does work. The above snippet of code does work when I am loading an image locally, but it does not when I try to access an image from an online server, like a public Dropbox account. Firefox is telling me it's a security issue; is there a way to get around it?

Answer 1

I believe that this is a Cross Origin Resource Sharing CORS (security) issue.

See HTML5 Canvas getImageData and Same Origin Policy

The gist is, requests to images from external domains could inherently supply the user's authentication cookies, etc, allowing your javascript to access their potentially protected images and assets. While you can reference them, via <img>, CORS was established as a security protocol to prevent you from programmatically reading (and perhaps storing) the pixel data.

The Dropbox API supports CORS as of mid August, 2012. You may be able to accomplish what you want using their API once users properly authenticate.

https://github.com/dropbox/dropbox-js/blob/master/doc/getting_started.md