1

I am trying to use document.styleSheets[i].cssRules in the JavaScript console to read loaded CSS files of a tab. However, more often than not, I get the error: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet.

I figured out that cross-domain CSS rules can be only rendered, but not read with JavaScript, probably to prevent some kinds of XSS attacks. I tried to bypass this by using CORS Everywhere extension for Firefox, which I have already used for some cross-domain AJAX requests for data scraping from the JS console, where it worked fine. However, it didn't work for reading CSS rules. I also tried some similar extensions for Chrome, but I got similar error message, and extensions changed nothing about it.

Is there a way to make the browser give JS the read to the already loaded CSS rules in an already loaded tab?

If I just find URLs of stylesheets and try to read them with AJAX requests (which I can do), the server might respond with different files. I am interested in reading the already loaded CSS rules for the already loaded HTML in an already loaded tab.

Danijel
  • 123
  • 6
  • There's always the `content.cors.disable` flag in about:config, but the real answer is a question: "It depends: what are you trying to *achieve*?", because it's entirely possible that using JS to manipulate CSSRules is nowhere near the best solution (e.g. create a ` – Mike 'Pomax' Kamermans Sep 11 '20 at 17:17
  • And of course, if you want code that can safely run while also being allowed to bypass CORS, write your [own browser extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension) so you can pre-authorize all the normally-security-model-breaking behaviour. – Mike 'Pomax' Kamermans Sep 11 '20 at 17:19
  • @Mike'Pomax'Kamermans I am just trying to read the loaded CSS (using the browser's console). Perhaps I should edit my question to make this more clear. – Danijel Sep 11 '20 at 21:44

0 Answers0