SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

[ris0]

Use case: description, code

Hello everyone,

I have been experimenting with this library over the past few weeks. It was working perfectly fine until this week. I'm able to download the image but the CSS rules do not get applied.

domtoimage.toPng(parentElement).then(function (dataUrl) { console.log("downloading image"); let imgElement = document.getElementById("downloadtest"); imgElement.setAttribute("href", dataUrl); imgElement.setAttribute("download", "Test file.png"); imgElement.click(); }).catch((error) => { console.error(error); }); I get the following error message in my console: Error while reading CSS rules from chrome-extension://liecbddmkiiihnedobmlmillhodjkdmb/css/content.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules dom-to-image.js?d424:684

jsfiddle

Expected behavior

Download image with CSS rules applied

Actual behavior (stack traces, console logs etc)

Image downloaded without CSS rules applied

Library version

2.6.0

Browsers

Chrome Version 66.0.3359.117 (Official Build) (64-bit)

[ris0]

I was able to find a solution. If you modify the getCssRules method in the dom-to-image so that it looks like this:

            function getCssRules(styleSheets) {
                var cssRules = [];
                styleSheets.forEach(function (sheet) {
                    if (sheet.hasOwnProperty("cssRules")) {
                        try {
                            util.asArray(sheet.cssRules || []).forEach(cssRules.push.bind(cssRules));
                        } catch (e) {
                            console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
                        }
                    }
                });
                return cssRules;
            }

Notice the usage of if (sheet.hasOwnProperty("cssRules")) Please take a look at these posts for reference: https://github.com/HdrHistogram/HdrHistogram/pull/135/commits/2831ebdcf1c7507e8941e29cd3b5d8c35c2cfd9c https://github.com/odoo/odoo/issues/22517

[Warriormuffin]

Anyway to give it access to the material style sheet? Mine won't render material icons

[andytwoods]

I'll pull request that solution @ris0. Hope ok.

[carttrac]

Looks like the fix did not pass the tests...

[impactcolor]

the if statement solution fixes the error from appearing in console but with it my web fonts don't render.

[IAmRC1]

Just add crossorigin="anonymous" to all your link files to fix this. Had the same error, fixed!

[mitesh-agarwal-bh]

In firefox, I am able to capture the screen with the applied css.

However, i am not able to capture the screen with the applied CSS on Chrome v84.0.4147.

How to fix this ?

[zvvysotskaya]

Thank you. It works for me!!

[BespalkoSergey]

@IAmRC1 Thank you. It works for me too

[DavidThomas48]

I started having this problem today. I added crossorigin="anonymous" in the link tags but that did not fix the problem. I traced it to the presence of some SVG icons in the source html. They are stored locally (i.e. same domain) and were being loaded as src="..." . I replaced these img tags with the straight

[kelvinkn17]

Just add crossorigin="anonymous" to all your link files to fix this. Had the same error, fixed!

Thanks man, ily 💖, struggling for this for hours

[born2net]

same issue... please assist :(

[DavidThomas48]

same issue... please assist :(

@born2net more details please