Html2canvas: DOMException: "The operation is insecure." firefox with ghostery module

Created on 22 Jan 2019 · 11Comments · Source: niklasvh/html2canvas

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

[ ] You are using the latest version
[ ] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

The bug appear when i have the ghostery firefox module
14ms html2canvas: DOMException: "The operation is insecure."

When disabled ghostery from firefox "about:addons" my code work great.
When enabled ghostery from firefox i have this error : DOMException: "The operation is insecure."

Please replace this line with a brief summary of your issue AND if possible an example on jsfiddle.

Specifications:

html2canvas version tested with:html2canvas 1.0.0-alpha.11
Browser & version:Version 64.0.2, first offered to Release channel users on January 9, 2019
Operating system: Windows 10

Source

SudDevPP

👍2

Most helpful comment

@apenab
Firefox :
Version 65.0.2, first offered to Release channel users on February 28, 2019 (64 bits)
And extrad addon :
Adblock Plus
Ghostery

It's work fine when disable Ghostery

SudDevPP on 4 Mar 2019

👍2

All 11 comments

I have the same problem.

apenab on 4 Mar 2019

👍2

@apenab hi i have find a way . Have you the issues on Firefox ?
I have issues with : ghostery
And the last week i have issues because Firefox wasn't updated , after update it work fine.

But i have always issues with ghostery module no i have delete ghostery ... :(

SudDevPP on 4 Mar 2019

@apenab the useCORS : false doesn't work for me i have try but i doesn't have effect.

SudDevPP on 4 Mar 2019

👍2

@SudDevPP Please tell me the version of your browser and if you are using an extra addon

apenab on 4 Mar 2019

@apenab
Firefox :
Version 65.0.2, first offered to Release channel users on February 28, 2019 (64 bits)
And extrad addon :
Adblock Plus
Ghostery

It's work fine when disable Ghostery

SudDevPP on 4 Mar 2019

👍2

@SudDevPP The problem remains unresolved.

apenab on 4 Mar 2019

Oh my god. I've been trouble shooting forever, but after seeing this post I tried my project in Chrome and it worked.
In Firefox 65.0.1, html2canvas also throws me a DOMException: "The operation is insecure."

I don't have Ghosterly. Here is a list of my ad-ons: AdNauseum, ColorZilla, Dissenter Extension, Evernote Web Clipper, Impulse Blocker, LastPass, React Dev Tools, Web Scrobbler

Edit: After removing different ad-ons I've found that it works fine when I disable Evernote Web Clipper. Very odd.

McFarJ on 18 Mar 2019

👍1

@McFarJ hi can you try update your Firefox to 65.0.2 version ?

SudDevPP on 18 Mar 2019

@SudDevPP I'm using Linux and it's the latest version in my distro's shop, the update process from Firefox's website: https://support.mozilla.org/en-US/kb/update-firefox-latest-version does not immediately make any updates for me.

I'm happy with my current setup being auto-synced with the shop and am not looking to screw around with that. Also, it seems astronomical odds that upgrading to 65.0.2 would fix this issue, when it's an issue you have on 65.0.2 but because of a different add-on.

McFarJ on 18 Mar 2019

Encountered this with Firefox Multi-Account Containers.

stacksideflow on 8 May 2019

@apenab the useCORS : false doesn't work for me I have try but i don't have an effect.

I have a solution!

So after many days of pounding my head against the wall trying everything I was able to dig into the problem. The html2canvas documentation specifies a flag removeContainer which is a boolean by default set to true. The html2canvas library creates an iframe container for the element that you are copying (by default removes it), however, if you set removeContainer to false you will find out that these iframes have a <div> between the <head> and the <body> tags. This extra <div> will offset the body element, therefore, causing the rendered canvas to have whitespace above anything you want to capture.

So once I found out what exactly was causing the issue I went forward with a fix. I have 2 fixes for this problem:

Set the body css to html.build-mode body{position:fixed;top:0;bottom:0;left:0;right:0 (assuming you set html tag with class build-mode during your build).

AND/OR

Add this to your html2canvas options (like useCORS, or allowTaint) onclone: x => $(x).find("html > div,html > span").hide() (assuming you are using jQuery).