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

More Related Contents:

  1. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  2. File input ‘accept’ attribute – is it useful?
  3. Html5 canvas drawImage: how to apply antialiasing
  4. Drawing text to with @font-face does not work at the first time
  5. What’s the best way to set a single pixel in an HTML5 canvas?
  6. Using base tag on a page that contains SVG marker elements fails to render marker
  7. Remove outline from select box in FF
  8. Play sound file in a web-page in the background
  9. How to change the opacity (alpha, transparency) of an element in a canvas element?
  10. using HTML5 Canvas – rotate image about arbitrary point
  11. HTML5 Canvas getImageData and Same Origin Policy
  12. Animated GIF in HTML5 canvas
  13. Chart.js canvas resize
  14. HTML5 Canvas background image
  15. Placing a within a
  16. Open a direct file on the hard drive from firefox (file:///)
  17. Combining two or more Canvas elements with some sort of blending
  18. transition for background-image in firefox?
  19. What is the difference between SVG and HTML5 Canvas?
  20. Subpixel anti-aliased text on HTML5’s canvas element
  21. Firefox form targeting an iframe is opening new tab
  22. iframe contents cant appear in Firefox
  23. Draw SVG on HTML5 Canvas with support for font element
  24. :before && :after pseudo elements not showing Firefox
  25. “break-inside: avoid-column” doesn’t work in Firefox
  26. How put percentage width into html canvas (no css)
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment