document.styleSheets[x].cssRules are null

Question

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?

Answer 1

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

Answer 2

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.

For more information about CORS you can read this and this.