The function context.getImageData () is not safe

Question

I want to implement a simple grayscale filter for an HTML5 canvas, but I cannot capture image data as pixels. I get security warnings from FF and Chrome. Finally, the filter does not make the image gray.

JS FIDLE CODE

JS:

var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var 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); var 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){ var d = imageData.data; for (var i = 0; i < d.length; i += 4) { var r = d[i]; var g = d[i + 1]; var b = d[i + 2]; d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3; } return imageData; } 

Answer 1

This is a safety feature. From W3 :

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

This means that attackers can upload potentially private images that the user's browser has access to the canvas, and then send data to their own servers. Source purge can be disabled if:

• The 2D method of the drawImage () method of a 2D object is called using an HTMLImageElement element or an HTMLVideoElement element whose origin does not coincide as the document object to which the canvas element belongs.

• The 2D method of the drawImage () method of a 2D object is called using the HTMLCanvasElement element, whose start flag is false.

• The fillStyle attribute for a 2D object attribute is set to a CanvasPattern object that was created from an HTMLImageElement or HTMLVideoElement element whose origin does not match the document source text of the object to which the canvas element belongs when the template was created.

• The fillStyle attribute for the 2D object attribute is set to the CanvasPattern object that was created from the HTMLCanvasElement element, which the origin-clean flag was false when the template was created.

• The attribute attribute of a 2D attribute of a 2D element is set to a CanvasPattern object that was created from an HTMLImageElement or HTMLVideoElement element whose origin does not match the document source text of the object to which the canvas element belongs when the template was created.

• The attribute of the element's strokeStyle 2D attribute is set to the CanvasPattern object that was created from the HTMLCanvasElement element, which the origin-clean flag was false when the template was created.

• The 2D context method fillText () or strokeText () is called and ends with a font that has a beginning that is not the same as the Document object to which the canvas element belongs.

A source