When I inspect a website,
I see the cssRules from document.styleSheets[x].cssRules
However, with this website stackoverflow.com, when I inspect with Chrome browser, I see document.styleSheets, but cssRules is null.
How come this is possible?
document.styleSheets[x].cssRules are null
Viewed 1273
2 Answers
That's because the style sheets are coming from a different domain. Some browsers (such as Chrome) implement strict cross-domain policies by throwing security errors or setting the cssRules and ownerRule to null when it comes from a different domain...in your case the style sheets come from a CDN
MDN quotes the following in the CSSStyleSheet documentation...
In some browsers, if a stylesheet is loaded from a different domain, calling cssRules results in SecurityError.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
To try bypass this problem, you can add crossorigin="anonymous" in the link tag to prevent the error.
More info here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
This will create a potencial cors request but the server must respond with Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: <authorized-domain>.
You can check here to see how to add CORS support to your server.
Related