context.getImageData() operation is insecure

by

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

Leave a Comment

tech