erreur de sécurité l'opération n'est pas sûre dans firefox document.stylesheets

Le code suivant génère une erreur dans le Firefox de la Console à la ligne avec le poursuivre.

SecurityError: The operation is insecure.
if( !sheet.cssRules ) { continue; }

Cependant, ne pas en Chrome et IE 11... quelqu'un Peut m'expliquer le pourquoi de cela? (Et aussi comment faire pour re-travailler pour le rendre sûr.) Je suppose que c'est un problème de domaines, mais je suis coincé comme la façon de re-travailler le code correctement.

var bgColor = getStyleRuleValue('background-color', 'bg_selector');

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if( !sheet.cssRules ) { continue; }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) 
         return rule.style[style];            
     }
   }
  return null;
 }

source d'informationauteur jchwebdev

  1. 16

    Pour contourner la SecurityError dans Firefox lors de la tentative d'accéder à la cssRules attribut, vous devez utiliser un try/catch déclaration. La suivante devrait fonctionner:

    //Example call to process_stylesheet() with StyleSheet object.
process_stylesheet(window.document.styleSheets[0]);

function process_stylesheet(ss) {
  //cssRules respects same-origin policy, as per
  //https://code.google.com/p/chromium/issues/detail?id=49001#c10.
  try {
    //In Chrome, if stylesheet originates from a different domain,
    //ss.cssRules simply won't exist. I believe the same is true for IE, but
    //I haven't tested it.
    //
    //In Firefox, if stylesheet originates from a different domain, trying
    //to access ss.cssRules will throw a SecurityError. Hence, we must use
    //try/catch to detect this condition in Firefox.
    if(!ss.cssRules)
      return;
  } catch(e) {
    //Rethrow exception if it's not a SecurityError. Note that SecurityError
    //exception is specific to Firefox.
    if(e.name !== 'SecurityError')
      throw e;
    return;
  }

  //ss.cssRules is available, so proceed with desired operations.
  for(var i = 0; i < ss.cssRules.length; i++) {
    var rule = ss.cssRules[i];
    //Do something with rule
  }
}
  2. 0

    J'ai eu le même problème avec Firefox. Essayez plutôt ceci.

    function getStyle(styleName, className) {

    for (var i=0;i<document.styleSheets.length;i++) {
        var s = document.styleSheets[i];

        var classes = s.rules || s.cssRules
        for(var x=0;x<classes.length;x++) {
            if(classes[x].selectorText==className) {
                return classes[x].style[styleName] ? classes[x].style[styleName] : classes[x].style.getPropertyValue(styleName);
            }
        }
    }
}