Security errors when attempting to save a captured canvas as a PNG file in Edge browser

[chrisfoote]

I have an example on JSFiddle https://jsfiddle.net/1erhqu15/ that captures the document, crops it and then saves it as a PNG file. This works fine in Chrome & Firefox, but in Microsoft Edge I get a 'Security Error' thrown when getImageData() is called on the context of the canvas. Similarly, getImageData() throws a 'The operation is insecure' error when run on Safari V10.

Any thoughts on what could be causing the error?

Thanks,
Chris

[cburgmer]

Hey, all browser's are taking precautions not to leak any information from the user's browsing context from the interpreted HTML. Firefox and Chrome handle this well, WebKit throws a hard error when reading from the canvas. I haven't looked into Edge much, so I can't tell for sure, but I'm assuming that this is a similar issue.

If you are interested in finding out more, you could go step by step, by

1. start reading back from an empty canvas, then
2. painting a simple SVG to the canvas then reading back,
3. rendering a SVG with an empty , reading back, and finally
4. rendering simple HTML in that tag, reading back.

Then let's see how that goes.

[chrisfoote]

Thanks for the response!

I've tried painting a simple SVG by calling fillRect() on the canvas. Calling getImageData() on the canvas works in Microsoft Edge.

Sorry, I'm not 100% sure what you mean by 'rendering a SVG with an empty' - could you clarify?

[cburgmer]

Sorry, Github might have swallowed the foreignObject tag. Can you try with this?