Unable to access cssRules property DOMException: "CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

[LazyHatGuy]

Bug reports:

My project uses Angular 9.1.0 and SCSS files and every time I attempt to convert an HTML element to canvas I get the following error

Unable to access cssRules property DOMException: "CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

Does anyone know how to get around CORS in this case?

Specifications:

• html2canvas version tested with: 1.0.0-rc.5
• Browser & version: Firefox 74.0.1
• Operating system: Windows 10 Pro

[querkmachine]

I was having this problem with my Vue-powered project in Firefox 75.0 (macOS 10.15.3).

Weirdly, I my project doesn't have any cross-origin stylesheets, so I went and debugged where it was tripping over and found that it was trying to read in styles that had been injected by the Ghostery browser extension. Might be worth disabling your extensions and see if that's the cause of the problem?

[manuelstengelberger]

Same problem here on a Mac. In my case it was the ghostery addon for FF. But somehow on a MacBook with the same setup, it worked, although ghostery was running.

[Undoundoundo]

A user of my site encountered the same problem (full error: "SecurityError: CSSStyleSheet.css Rules getter: Not allowed to access cross-origin stylesheet"), but with the Multi-Account Containers extension on Linux.. but not on Windows. The CSS is a file on the same domain as the html document, as it the script that is accessing it.

As I can't replicate the issue, I don't know if my site's accessing an incorrect stylesheet (I use document.styleSheets[0].cssRules which should access the document's first-listed link CSS) or whether the extensions(s) are tainting the page's CSS causing a CORS error or what.

Short of disabling the offending extension or removing the code that accesses (and in my case, changes) the CSS rule(s), I have yet to find a solution.

[Undoundoundo]

minor update: that user was kind enough to help debugging and we determined at leas that the extension in question did inject its own CSS rule in the styleSheets list, ending up before the site's own. Its href property was null, and I didn't delve deeper to see if I could find the true culprit. At least for my site's purposes, it was enough to loop over all styleSheets and find the index of the correct styleSheet to adjust, rather than presuming (validly so) that it should have been index zero.

[Undoundoundo]

final update: Not sure what MAC's role in all this was, but the actual culprit was the Dark Mode extension (doubly-so as it injects even when switched off) - Dark Reader does the same thing.

[pmop]

Same here, except that I'm on Ubuntu. I'm unable to take screenshots using html2canvas (using website's example). Works fine on Chromium based browsers for me tho. I bet this issue is exclusive to Firefox.

[cseoneohs]

Same problem for me on a Linux. In my case it was the ghostery addon for Firefox. I remove it.

[sbluhm]

final update: Not sure what MAC's role in all this was, but the actual culprit was the Dark Mode extension (doubly-so as it injects even when switched off) - Dark Reader does the same thing.

Thank you. The Dark Mode extension caused the issue for me on Zimbra Classic UI.

[Exter-dg]

Faced the same issue on Ubuntu 20.04.3 LTS, Firefox 96. Disabled all extensions and it started working (didn't have ghostery).

[mayanksdudakiya]

Faced the same issue on Ubuntu 20.04.3 LTS, Firefox 96. Disabled all extensions and it started working (didn't have ghostery).

I have disabled all extensions and working fine now. Thanks

[mikran]

I had this problem as well, and it got solved for me by disabling the "Hover Zoom+" extension.

[thelfensdrfer]

That's nice and all, but "removing all extensions" is not a good option for all users.

[zybork]

I had the very same error even with a simple monolithic HTML-page (=no external stylesheet), and I had it with various browsers under various operating systems, turns out that, yes, it absolutely is some plugin messing with stylesheets, but since I just can't tell everybody to disable all their extensions, I assigned an ID to the style-section within the HTML-page and referred to the stylesheet via document.getElementById:

<style id="id_of_stylesheet">
* {
  font-family: serif;
  /* et cetera */
}
</style>

<script type = "text/javascript">

let myStyles = document.getElementById("id_of_stylesheet").sheet.cssRules;
/* do whatever now with myStyles

</script>

And just like that, the problem no longer appears, because it no longer matters which extension inserts what where into the page's styles.

[amici]

Had the same issue with "DuckDuckGo Privacy Essentials" extension in Firefox, while using Jetbrain's Youtrack (dark theme only!).

[kaitlynia]

Seems like this project was abandoned years ago. I would really like for this to be fixed somehow, since user-facing pages using this require some disclaimer that your tools will break when using some extensions.

[rublev]

Seems like this project was abandoned years ago. I would really like for this to be fixed somehow, since user-facing pages using this require some disclaimer that your tools will break when using some extensions.

Awesome. Wish I checked this 5 fucking hours ago. FUCK

[Swaghubinger]

Seems like this project was abandoned years ago. I would really like for this to be fixed somehow, since user-facing pages using this require some disclaimer that your tools will break when using some extensions.

I switched to html-to-image, that one is still maintained and does basically the same thing. Maybe that is also an option for you

[cheerfulstoic]

I've been using 0.9.3 of html2pdf which I got via the cloudflare CDN link with the dependencies bundled. I've been using 0.9.3 because there was a note about there being problems with html2pdf v0.10. What I found is that there is already a fix in html2canvas to catch this exception and ignore it:

https://github.com/niklasvh/html2canvas/blob/v1.4.1/src/dom/document-cloner.ts#L182-L204

So, for me at least, it's because I was using html2pdf which was bundled with an older version of html2canvas. For now I just back-ported that fix into my .js file (I saved it to the public folder in my project with comments about how I've made a monkey-patch), but if anybody in this thread is still having problems, maybe this can be a direction to look in.