Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: SecurityError: DOM Exception 18 #40

Open
kevinchiu opened this issue Jun 11, 2016 · 30 comments
Open

Error: SecurityError: DOM Exception 18 #40

kevinchiu opened this issue Jun 11, 2016 · 30 comments

Comments

@kevinchiu
Copy link

kevinchiu commented Jun 11, 2016

Error: SecurityError: DOM Exception 18

I seem to be getting this error only in Safari when I try to save a node. The node is a div with a fixed height and width, but with nothing in it.

OS X El Capitan 10.11.5 (15F34)
Safari Version 9.1.1 (11601.6.17)

@teamco
Copy link

teamco commented Jun 28, 2016

The same issue
Error: SecurityError: DOM Exception 18
code: 18
column: 648
line: 30
message: "SecurityError: DOM Exception 18"
name: "SecurityError"
stack: "toDataURL@[native code]↵↵promiseReactionJob@[native code]"

@svenvandescheur
Copy link

I also ran into this issue, has anyone managed to work around it yet?

@tsayen
Copy link
Owner

tsayen commented Jul 13, 2016

@svenvandescheur could you please put together a jsfiddle that fails for you?

@acoyfellow
Copy link

Still digging, but this fiddle will re-produce "SecurityError: DOM Exception 18" for me, on desktop Safari, mobile everything (Opera, FF, Chrome, Safari), but it works as expected with Chrome on desktop.

https://jsfiddle.net/acoyfellow/Lggtwjbb/1/

@tsayen
Copy link
Owner

tsayen commented Aug 25, 2016

sorry to say, but I cannot reproduce that since don't own a Mac 😄
anyone with a Mac want to make a PR fixing this issue?

@thienhv295
Copy link

The same issue :(. Has anyone fix it?

@kevinchiu
Copy link
Author

@tsayen You can try using the Midori browser on Linux or Windows: http://midori-browser.org/

@WingGao
Copy link

WingGao commented Sep 7, 2016

After searching the web, I couldn't find a satisfactory solution.
So I just use a SVG to replace.

//line95
    function toPng(node, options) {
        return draw(node, options || {})
            .then(function (result) {
                try {
                    var image = result.canvas.toDataURL("image/png");
                    return image;
                } catch (err) {
                    console.warn(err);
                    return result.svg.src;
                }
            });
    }
//line 135
function draw(domNode, options) {
        return toSvg(domNode, options)
            .then(util.makeImage)
            .then(util.delay(100))
            .then(function (image) {
                var canvas = newCanvas(domNode);
                // after this, Canvas’ origin-clean is DIRTY
                // safari will throw 'SecurityError: DOM Exception 18'
                // but it can use 'data:images/svg+xml'
                canvas.getContext('2d').drawImage(image, 0, 0);
                return {canvas: canvas, svg: image};
            });
...

@thienhv295
Copy link

@WingGao: Actually, I had changed like you. And then it's show on browser only, but I cannot save image to file on server (cannot save data:images/svg+xml to image file). Do you have any solution for this issue?

@WingGao
Copy link

WingGao commented Sep 9, 2016

@thienhv295 Unfortunately, I used the server to decode the SVG but failed.
Finally, I change the lib to html2canvas...It seems work to me...

@evianzhow
Copy link

@WingGao I just wonder why html2canvas works for you. I'm using that lib but encountered the same error: SecurityError: DOM Exception 18. Can you provide a caveat about your code?

@WingGao
Copy link

WingGao commented Oct 12, 2016

@evianzhow
OK, maybe you miss the option useCORS.

html2canvas(myElement, {useCORS: true}).then(function (canvas) {
    try {
        b64Data = canvas.toDataURL("image/png");
    } catch (err) {
        console.log(err)
    }
}).catch(function onRejected(error) {
});

@evianzhow
Copy link

@WingGao My caveat is similar to your's. But Safari raise the exception: SecurityError (DOM Exception 18): The operation is insecure.

@mtmckenna
Copy link

Hello! I'm getting Exception 18 in Safari too. Here's the error:

Error: SecurityError: DOM Exception 18
toDataURL
(anonymous function) — dom-to-image.js:98
promiseReactionJob

Might be related to this issue? http://stackoverflow.com/questions/33972254/svgpng-from-canvas-todataurl-throws-dom-exception-18-security-error-in-safari-9

@WingGao
Copy link

WingGao commented Oct 15, 2016

@evianzhow @mtmckenna
Here is my demo, I hope it can help you.
https://jsfiddle.net/hkkynoyz/

@MarkusSvensson
Copy link

MarkusSvensson commented Oct 15, 2016

I have this problem and it is blocking my development as it is an Ionic app for iOS...

I verified @WingGao's "solution" to use another library: html2canvas - it works but I have some rendering problems with this lib and html2canvas does not seem to be maintained anymore.

Just want to contribute to prioritisation for this issue. As it works for html2canvas there 'should' be a workaround, but I don't know where to start.

@bparousis
Copy link

I'm having the same problem and I hope there's a solution soon.

@bparousis
Copy link

bparousis commented Oct 31, 2016

@pietersv I don't think that works, because it's not converting it to png. The "toDataUrl" does the png conversion, so you're skipping the png conversion step. You should just use toSvg if all you want is the svg image. The method toSvg works, since it doesn't call toDataUrl.

@bparousis
Copy link

bparousis commented Oct 31, 2016

I came up with a bit of a workaround. Basically, I use the toSvg method and then I take the <svg>....</svg> part and wrap it in <html><body><div>...</div></body></html>. I then pass this to webshot library (https://github.com/brenden/node-webshot), which uses phantomjs to take the html and create a screenshot of it. It works, but obviously not the ideal solution.

The issue is ultimately with the <foreignObject> tag. This causes the canvas to be marked as tainted and then Safari just doesn't allow you to do the toDataUrl call. I think this is something that needs to be fixed in the browser. In the meantime, just need workarounds, I guess.

@pietersv
Copy link

pietersv commented Oct 31, 2016

@Digity You're right, this worked for part of the ways I used toDataURL() but not the actual PNG file. Wishful thinking. [post deleted]

@bparousis
Copy link

Here's some quick sample code for converting it to png using webshot library:

domtoimage.toSvg(node)
.then(function(dataUrl) {
    var svg = dataUrl.substring(dataUrl.indexOf('<svg'));
    webshot('<html><body><div>'+svg+'</div></body></html>', 'myimage.png', {siteType:'html'}, function(err) {
        // screenshot now saved to myimage.png
    });
})
.catch(function(error) {
    ...
});

@kapyaar
Copy link

kapyaar commented Oct 31, 2016

I am facing the same issue. Even without any images, just pure text, it is throwing a Dom exception 18 error on chrome and safari iphone versions. works ok on desktop.

http://jsfiddle.net/8h13tmcj/26/

@kapyaar
Copy link

kapyaar commented Nov 5, 2016

@tsayen I think it is the <foreignObject> tag causing the problem. Is it possible to generate the svg without this tag?

@laflower
Copy link

Same issue on ionic

@tonystark93
Copy link

If you use foreign object in the svg and then converting it to canvas which contains foreign object will cause security error.

@denis-sokolov
Copy link
Contributor

This is a duplicate of #27.

@Rainpia
Copy link

Rainpia commented Jun 30, 2017

@WingGao I use this like you . but can not save image, do you have some advise ?

@alanhe421
Copy link

@Rainpia @WingGao how to save pic ?

@bsautel
Copy link

bsautel commented Jul 24, 2017

@alanhg , see this comment in which I explain the workaround I use to make a screen shot in a Cordova application. It supports Android and iOS only but it may be extended to support additionnal browsers.

Hope it will help you!

@minchangyong
Copy link

who can copy once demo in there!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests