context.getImageData() operation is insecure

I want to realize a simple greyscale filter for HTML5 canvas, but I canot grab the Image data as pixels. I get security warnings from FF and Chrome. Finally the filter does not make the image grey.

JS FIDLE CODE

js:

const canvas = document.getElementById('canvas');       
const context = canvas.getContext('2d');  

const image = new Image();
image.onload = function () {
  if (image.width != canvas.width)
    canvas.width = image.width;
  if (image.height != canvas.height)
    canvas.height = image.height;
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}
image.src = "http://i0.gmx.net/images/302/17520302,pd=2,h=192,mxh=600,mxw=800,w=300.jpg";

function filter(imageData){
 const d = imageData.data;
   for (let i = 0; i < d.length; i += 4) {
     const r = d[i];
     const g = d[i + 1];
     const b = d[i + 2];
     d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
   }
   return imageData;
}

Solution

This is a security feature. From W3:

The getImageData(sx, sy, sw, sh) method must, if the canvas element's origin-clean flag is set to false, throw a SecurityError exception

This is to prevent malicious site owners from loading potentially private images that the user's browser has access to onto the canvas, then sending the data to their own servers. The origin-clean can be turned off if:

The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

The element's 2D context's drawImage() method is called with an HTMLCanvasElement whose origin-clean flag is false.

The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

The element's 2D context's fillStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLImageElement or an HTMLVideoElement whose origin was not the same as that of the Document object that owns the canvas element when the pattern was created.

The element's 2D context's strokeStyle attribute is set to a CanvasPattern object that was created from an HTMLCanvasElement whose origin-clean flag was false when the pattern was created.

The element's 2D context's fillText() or strokeText() methods are invoked and end up using a font that has an origin that is not the same as that of the Document object that owns the canvas element.

Source