getContextData &/ getImageData creates DOMException: SecurityError

[cgencer]

code: 18 ​columnNumber: 0 ​data: null ​filename: "http://localhost:9966/node_modules/gif.js/dist/gif.js" ​lineNumber: 2 ​message: "The operation is insecure." ​name: "SecurityError" ​result: 2152923154 stack: "[3]</GIF</GIF.prototype.getContextData@http://localhost:9966/node_modules/gif.js/dist/gif.js:2:12027\n[3]</GIF</GIF.prototype.getImageData@http://localhost:9966/node_modules/gif.js/dist/gif.js:2:12451\n[3]</GIF</GIF.prototype.getTask@http://localhost:9966/node_modules/gif.js/dist/gif.js:2:13029\n[3]</GIF</GIF.prototype.renderNextFrame@http://localhost:9966/node_modules/gif.js/dist/gif.js:2:11823\n[3]</GIF</GIF.prototype.render@http://localhost:9966/node_modules/gif.js/dist/gif.js:2:9303\nfn_save/<@http://localhost:9966/js/editor.js:456:4\n"

The above DOMException has been generated with these parameters:

• clientside-only code,
• HTML header has CORS code as such: <meta http-equiv="Content-Security-Policy" content=" img-src 'self' filesystem http://localhost http://localhost:9966 http://127.0.0.1 http://127.0.0.1:9966 http://www.fen-to-image.com; connect-src localhost:9966 ws:; style-src 'self' 'unsafe-inline'; script-src 'self' filesystem http://localhost http://localhost:9966 http://127.0.0.1 http://127.0.0.1:9966 'unsafe-inline' 'unsafe-eval';">
• i retrieve the images from [www.fen-to-image.com](http://www.fen-to-image.com/image/24/single/rnbqkbnr/pppppppp/8/8/3P4/8/PPP1PPPP/RNBQKBNR b KQkq d3 0 1) in advance, create an for each of them, resulting fine as the images are visible to both eye & code
• i access the images trough the document.images collection as such: var gifAnim = new GIF({ width: 240, height: 240, workers: 2, quality: 10 }); _.map($('#TheImageSet img'), function(n, i){ gifAnim.addFrame(document.images.namedItem("ss_" + i)); }); gifAnim.render(); this created the named trouble. any ideas or clues where i can investigate more? i tried all various things I can think of.

[1j01]

A security error means the canvas is being tainted.

images are visible to both eye & code

They can be visible to the eye and to some code, but not to code that tries to read the pixel data.

Try putting crossorigin="anonymous" on your img tags.

[cgencer]

the fun is, when i try to add that attribute, the image isnt visible & loaded anymore. does that means the source server isnt setup for cors? is there any way to ensure that the server (which is other parties set up) has cors enabled or disabled? thanks

Sent from my iPad

On 14 Apr 2018, at 08:21, Isaiah Odhner notifications@github.com wrote:

A security error means the canvas is being tainted.

images are visible to both eye & code

They can be visible to the eye and to some code, but not to code that tries to read the pixel data.

Try putting crossorigin="anonymous" on your img tags.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[1j01]

any way to ensure that the server (which is other parties set up) has cors enabled or disabled?

You can look in the chrome devtools Network tab, refresh if needed, then click on a resource and view the headers. It looks like there's no Content-Security-Policy header.

I'd recommend you generate your own images, or use a table... Looks like there's a library for this: http://chessboardjs.com/, which supports animating and stuff, and if you liked the look of the images from that other resource, you could even style it with CSS. If you need to export images for download, you could use html2canvas. As a bonus, you wouldn't have to rely on an external site staying up (assuming you download the script)