Dom-to-image: Recently getting errors while reading the cssRules

[romanegloo]

Use case: description, code

I have been using domtoimage.toPng in my script, and recently I am seeing the following error message.

Error while reading CSS rules from chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/content.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

A quick search gives me that:
TL;DR: As of Chrome 64 you'll need to use a local development server to test functionality that depends on the CSS Object Model.

I am not sure if this is a bug due to this recent change, or mine. Any ideas?

Browsers

Chrome 65

[zollero]

Have the same error in Chrome 65

[simon-lang]

@romanegloo did you end up solving this? I'm experiencing the same issue in Chrome 66. Firefox appears to be fine.

I haven't worked to isolate the issue but it seems like it might be happening when there are images present in the DOM to be converted. This is a guess since my same code is working in other places where no images are present.

[MDSLKTR]

In case the CSS is loaded via a link tag you can add crossorigin="anonymous" to solve this error in chrome.

[sashatran]

Having the same problem in Chrome 67.
I did what @MDSLKTR said, but that didn't solve the issue.
Works fine on FireFox.

[simon-lang]

That fix does not work for me either.

@sashatran does the DOM that you're saving include images?

[daiokaio]

Getting this error in local and prod environments. My DOM has SVG elements.

[sashatran]

@simon-lang no images, just a div element.

[GabrielShaad]

I'm getting the same error in Chrome 68, both in local and production environments.

[FARHANE]

I have the same probleme with both chrome and firefox for project with angular 7 that using material design and material icons
Error while reading CSS rules from https://fonts.googleapis.com/icon?family=Material+Icons SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

[jsanjeev]

crossorigin="anonymous" worked in chrome Version 72.0.3626.109 (Official Build) (64-bit).
Thanks @MDSLKTR

[zaidITpro]

@jsanjeev can you please explain the solution a bit.

[MuthomiMate]

@zaidITpro you need to add crossorigin="anonymous" to the stylesheet for example
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700,900|Open+Sans|Open+Sans+Condensed:700" rel="stylesheet" crossorigin="anonymous">.
You can read more on crossorigin here

[zhouxiongking]

i try to add crossorigin="anonymous" to the link element, it works fine.
Thank you~

[BonBonSlick]

was not able remove it in nuxt + vuetify

[priyomukul]

does the DOM that you're saving include images?

@simon-lang, I am using this package, getting the same error while I have IMG tag in my dom source element. Any ideas to solve this issue?