search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.47k stars 4.8k forks source link

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

Open SudDevPP opened 5 years ago

SudDevPP commented 5 years ago

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:

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:

apenab commented 5 years ago

I have the same problem.

SudDevPP commented 5 years ago

@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 commented 5 years ago

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

apenab commented 5 years ago

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

SudDevPP commented 5 years ago

@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

apenab commented 5 years ago

@SudDevPP The problem remains unresolved.

McFarJ commented 5 years ago

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.

SudDevPP commented 5 years ago

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

McFarJ commented 5 years ago

@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.

st4cks1defl0w commented 5 years ago

Encountered this with Firefox Multi-Account Containers.

kixes commented 5 years ago

@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:

  1. 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

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