1

I am trying to detect (and then change) stylesheet in any loaded page.

I try the folowing code:

// from https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList
var allCSS = 
    [].slice.call(document.styleSheets)
        .reduce(function (prev, styleSheet) {
            if (styleSheet.cssRules) {
                return prev +
                    [].slice.call(styleSheet.cssRules)
                        .reduce(function (prev, cssRule) {
                            return prev + cssRule.cssText;
                        }, '');
            } else {
                return prev;
            }
        }, '');
console.log(allCSS);

When I run this code on this page for example, I get a few stylesheets in the console.

However this is definitely not all the styles, it is infact just a small portion of it.

For example in the debugger I see that the page loads all.css from 'cdn.sstatic.net' with many styles, none of them are shown.

What am I doing wrong ? and how can I get ALL stylesheets ?

Thx!

kofifus
  • 17,260
  • 17
  • 99
  • 173
  • 1
    running your code in console in Firefox results in `SecurityError: The operation is insecure` - possibly a cross origin issue? – Jaromanda X Jul 25 '17 at 01:52
  • definitely a cross-origin issue. – Kaiido Jul 25 '17 at 01:52
  • works fine in chrome. Questions remain - how do I get ALL stylesheets loaded in a page ? – kofifus Jul 25 '17 at 01:59
  • 1
    You can't, not without high privileges or without using a proxy. Now, you could test your luck, set the `crossOrigin` of the styleSheet's `ownerNode`, and reload it, but I doubt it will work anywhere. – Kaiido Jul 25 '17 at 02:01
  • 1
    as I said, it gives that error if you run the code directly in firefox console - which leads me to believe it's a cross-origin issue – Jaromanda X Jul 25 '17 at 02:01
  • When do you run the code? Can you reproduce the issue at plnkr https://plnkr.co? – guest271314 Jul 25 '17 at 02:06
  • I run it through the RunJS extension - https://chrome.google.com/webstore/detail/runjs-run-javascript-on-p/aoibngbnkmhhbbjmlbaeffdhjgcnbggk?hl=en – kofifus Jul 25 '17 at 02:50

2 Answers2

5

CssRules

In some browsers, if a stylesheet is loaded from a different domain,
calling cssRules results in SecurityError.

  • User agent (default) style sheets aren't visible in document.styleSheets

The CSSStyleSheet Interface (specs)

The cssRules attribute must follow these steps:

  • If the origin-clean flag is unset, throw a SecurityError exception.
  • Return a read-only, live CSSRuleList object representing the CSS rules.
Community
  • 1
  • 1
btzr
  • 2,077
  • 18
  • 25
  • 3
    It's actually [now in specs](https://drafts.csswg.org/cssom/#the-cssstylesheet-interface) that it should throw an Security Error – Kaiido Jul 25 '17 at 02:17
0

If requirement is to get and change .css files loaded at document, you can request the files that you view at DevTools, remove all existing style sheets from document, make adjustments to text of responses, append adjusted text as .css to document or at <style> elements.

guest271314
  • 1
  • 15
  • 104
  • 177