Use javascript to get CSS rules from an external stylesheet

Question

I’m getting the style sheet rules for this situation addressed in this question.

But if you use internal CSS (with tag <style>) I correctly get the declared styles, as you can see in the following example:

var sheets = document.styleSheets;

for (var i in sheets) {
  var rules = sheets[i].rules || sheets[i].cssRules;
  for (var r in rules) {
    if (rules[r].selectorText) {
      // para imprimir no DOM
      document.body.appendChild(document.createTextNode(rules[r].cssText));
      document.body.appendChild(document.createElement("br"));
    }
  }
}

p {
  color: red;
}
h1 {
  font-size: 16pt;
}

I already use an external CSS file, the document.styleSheets even brings the style sheet, but the rules (rules or cssRules) are null, and the attribute href is with the value of url external pointing to the file. As can be seen in the following example:

var sheets = document.styleSheets;

for (var i in sheets) {
  if (sheets[i] instanceof CSSStyleSheet) {
    console.log(sheets[i]);
  }
  var rules = sheets[i].rules || sheets[i].cssRules;
  for (var r in rules) {
    if (rules[r].selectorText) {
      // para imprimir no DOM
      document.body.appendChild(document.createTextNode(rules[r].cssText));
      document.body.appendChild(document.createElement("br"));
    }
  }
}

<!-- Utilizei o CSS do bootstrap por ser um CSS confiável externo para demonstrar meu problema -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<p>Verifique o console para observar as saídas!</p>

Question

Is there any way to get CSS rules using external CSS file (Example 2), just like with internal CSS (Example 1)?

Testing here I noticed that in Firefox, this is working, but in Chrome, IE10 and Opera not.

Answer 1

As explained by Jordan M Alperin,

The only real solution to this problem is to load your CSS into CORS (Cross Origin Resource Sharing) mode. Through an xmlHTTPRequest CORS you load the CSS from an external domain, and then inject the responseText (actually a responseCSS in this case) into the page. Something similar to the code below:

function carregarCSSExterno(stylesheet_uri) {
    var _xhr = window.XMLHttpRequest;
    var has_cred = false;

    try {has_cred = _xhr && ('withCredentials' in (new _xhr()));} catch(e) {}

    if (!has_cred) {
        console.error('CORS not supported');

        return;
    }

  var xhr = new _xhr();
  xhr.open('GET', stylesheet_uri);
  xhr.onload = function() {

  xhr.onload = xhr.onerror = null;

  if (xhr.status < 200 || xhr.status >=300) {
      console.error('style failed to load: ' + stylesheet_uri)
  } else {
      var style_tag = document.createElement('style');
      style_tag.appendChild(document.createTextNode(xhr.responseText));
      document.head.appendChild(style_tag);
  };

  xhr.onerror = function() {
      xhr.onload = xhr.onerror = null;
      console.error('XHR CORS CSS fail:' + styleURI);
  };
}

  xhr.send();
}

// Após chamar essa função o estilo deverá ter sido adicionado para sua
// página e deverá estar preenchido com todas as regras CSS.
carregarCSSExterno("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css");

As well as elucity by Jordan M Alperin:

This way the CSS files will be interpreted by the browser as coming from the same origin domain as the main response page and now you will have access to the cssRules properties of your style page.