Dom-to-image: iOS chrome& safari throws "SECURITY_ERR: DOM Exception 18: The operation is insecure" error message

Created on 31 Oct 2016 · 21Comments · Source: tsayen/dom-to-image

Use case: Basic Conversion,

<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js"></script>
<!--script src="/js/html2canvas.js"></script-->
<style>
#bubble{
  width:500px;
  height:400px;
  border:2px solid black;
  z-index:1;
  position: static;
  overflow:hidden; 
}

img{
  z-index:-1;
}
</style>
<body>
<div id="bubble">
<img src="FallColors.jpg" >
 </div>


<input type="button" id="btnSave" value="Save PNG"/>

<div id="img-out"></div>

</body>
<script>
$(function() { 
    $("#btnSave").click(function() { 

        var node = document.getElementById('bubble');

        domtoimage.toPng(node)
        .then(function (dataUrl) {
            var img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
        })
        .catch(function (error) {
            console.error('oops, something went wrong!', error);
            alert('oops, something went wrong!', error);
        });

    });
}); 


</script>
</html>

Does not seem to work on iphone 6 (mobile in general?). Should append the image to dom as expected, and works on desktop browsers.
Chrome version 52.0.2743.84
Safari (ios10.1.1)

Here is a fiddle example. http://jsfiddle.net/8h13tmcj/25/ I am using only images same domain.

UPDATE:
I managed to get the error:
SECURITY_ERR: DOM Exception 18

Not sure how to handle this issue. Any ideas?

UPDATE

I even tried with just a div. no images, nothing. Still shows the same error on mobile browser chrome, safari on iphone.

http://avarachan.com/test.html

UPDATE
I did further testing on browserstack.com, and seems like chrome on android is working fine. That means it is just iOS. Can you please help?

cannot reproduce wontfix

Source

kapyaar

👍9

Most helpful comment

I tried many versions of it on my test page avarachan.com/test2.html

<!--meta http-equiv="Content-Security-Policy" content="default-src * 'self' data: 'unsafe-inline' 'unsafe-eval' gap://ready gap: cdvfile: file: https://ssl.gstatic.com blob: ws: wss:;"/-->
<!--meta http-equiv="Content-Security-Policy" content="default-src *;  img-src * 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'
  https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js https://cdn.rawgit.com/tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js;"-->
  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src *;img-src * 'self' data: http:;">

Page has just a div and text. Still same error on my iphone browsers :( Anyways, I will keep reading further. If you happen to come across anything relevant, please post :)

kapyaar on 3 Nov 2016

👍5

All 21 comments

I was running in other errors like these.

I've put this on meta tag content="default-src *; img-src * 'self' data: https:;
Resolved my problem :)

rafaeldcastro on 3 Nov 2016

I tried many versions of it on my test page avarachan.com/test2.html

<!--meta http-equiv="Content-Security-Policy" content="default-src * 'self' data: 'unsafe-inline' 'unsafe-eval' gap://ready gap: cdvfile: file: https://ssl.gstatic.com blob: ws: wss:;"/-->
<!--meta http-equiv="Content-Security-Policy" content="default-src *;  img-src * 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'
  https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js https://cdn.rawgit.com/tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js;"-->
  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src *;img-src * 'self' data: http:;">

Page has just a div and text. Still same error on my iphone browsers :( Anyways, I will keep reading further. If you happen to come across anything relevant, please post :)

kapyaar on 3 Nov 2016

👍5

Hi. Thanks for reporting. Unfortunately that would be a difficult thing for me to test, as I don't own any iOS devices. If you do find a solution, please make a PR

tsayen on 7 Nov 2016

@tsayen regardless of the ios platform, is it possible to do the svg part without the foreignobject tag? that should solve the issue.

kapyaar on 7 Nov 2016

that would be impossible, see how this lib works here

tsayen on 7 Nov 2016

😕1 👍1

Yeah I know. if you look at the html2canvas library (not as good as the one you have), it does work across platforms without issues. I dug a bit deeper, and did not find any foreignObject tag. I am only hoping that your eyes may catch some work arounds from that one. Keeping my fingers crossed ( as like a lot of others I guess who like this library better than others) :P

kapyaar on 7 Nov 2016

👍2

@kapyaar, as far as I know, html2canvas does not delegate the rendering to the browser via the foreignObject SVG element. It browses the DOM and draws each element according to all its style attributes. Some style attributes are directly specified in the style sheets, some other ones are computed by the browser at rendering (elements size for instance).
html2canvas has to know and take into account all style elements that determine how to display an element.

I tested it and it does not work very well. I got many rendering issues that prevented me to use it. Moreover, it is still in beta version and the development seems to be stopped...

After testing html2canvas, I discovered dom-to-image that is able to make a pixel-perfect rendering!

I am using it in a Cordova application that runs in Android and iOS. It works in Android >= 5.0 but for the moment I cannot get it work on Safari because of this error. I am gonna try all tips in this ticket.

bsautel on 9 Nov 2016

thanks for the update. As you stated, your observations are gold! dom-to-image does a pixel perfect rendering, no wonder why people like it. :) To the tune of helping on this, I already paid some folks on codementor.io to look into this, and they said they will get back to me. If you have a specific task that you wish to delegate, please let me know and I will try to contribute in that sense. Eitherway, thanks once again for this plugin. :)

kapyaar on 9 Nov 2016

@tsayen on the uint8array method, is there a way to convert the pixel data to a base64 encoded png other than using the toDataUrl() method? I read a lot that toDataUrl() may have security concerns that some platforms may be throwing an exception. But if we know for sure that the data is safe (all from same domain and known uses), is a browser side conversion possible?

kapyaar on 11 Nov 2016

The use of the tag is causing the canvas to be tainted in safari which then does not allow the usage of canvas.toDataURL()
Also the safari lacks support for canvas.toBlob() as stated in the mdn documentation so even that cannot be used

sarath-sasikumar on 6 Jan 2017

👍2

On my side, I could not get dom-to-image work in Safari. I ended up with a hybrid solution. I use dom-to-image on Android and html2canvas on iOS. Note that html2canvas has a very poor rendering on Android but behaves really better on iOS.

In old versions (Android < 5 and iOS < 10) none of them works. In this case I disabled the feature. Note that as I work on an mobile Cordova application, I don't care about other browsers / operating systems.

bsautel on 6 Jan 2017

This is a duplicate of #40.

denis-sokolov on 24 Apr 2017

I have used this angularjs library Click here This is a reference to dom-to-image library

Its working fine on below-listed OS and browser

Linux, Windows, Mac
- working: Chrome, Mozilla, Opera
- Not Working: Safari
Android
- working: Chrome, Mozilla, Opera, Safari
iPhone / iPad
- Not Working: Safari, Chrome, Mozilla, Opera

Here is a video please see Click to view video

How I can fix the issue on iPhone & iPad, is there any solution?

vishal-px on 14 Feb 2018

Hi @vishal-px

Safari has some security restrictions that prevent dom-to-image from working. Both Chrome on iOS, Firefox on iOS and Opera on iOS rely on the Safari's browser engine since Apple requires iOS applications rely on Safari and not any other browser engine. To sum up, on iOS, whatever the browser application you use, you are in fact running Safari. It is the reason why dom-to-image never works on iOS.

I proposed a workaround two comments above that works on recent iOS devices. It relies on html2canvas, another tool that renders HTML using another approach (it is the reason why it works on iOS).

bsautel on 15 Feb 2018

Hi @bsautel Thanks for replay, Before dom-to-image, I was used html2canvas it's working fine but SVG elements getting zoom after taking a screenshot.

vishal-px on 15 Feb 2018

I don't understand what you mean. You mean SVG is not supported by html2canvas? What is the problem about zooming?

bsautel on 15 Feb 2018

Hi @bsautel

Please see this Video

vishal-px on 15 Feb 2018

Hi, @bsautel have you seen a video, did you get any solution?

vishal-px on 23 Feb 2018

Yes but I still don't understand.

bsautel on 23 Feb 2018

I tried html2canvas library and I getting the problem.
The problem is that, after capturing the image the SVG element part getting ZOOM(Bigger).
Please see this issue

vishal-px on 23 Feb 2018

Ok, I don't know why. I am just a user of dom-to-image (and html2canvas as a workaround for iOS), I don't know how they work internally so I have not any solution to this issue. Sorry.

bsautel on 23 Feb 2018

Was this page helpful?

0 / 5 - 0 ratings