Ne peut pas accéder à cssRules locales fichier css dans google Chrome 64

voici un exemple simple du problème:

<html>
<head>
<link rel='stylesheet' href='myStyle.css'>
<script>
window.onload=function(){
    try{
        alert(document.styleSheets[0]); //works
        alert(document.styleSheets[0].cssRules); //doesn't even print undefined
    }catch(e){alert(e)} //catch and alert the error
}
</script>
</head>
<body>
</body>
</html>

myStyle.css body{background-color:green;}

script fonctionne très bien si vous utilisez <style></style>

SOLUTIONS:

1. fonctionne lorsque les fichiers sont en ligne/localhost

2. travaille avec d'autres navigateurs (c'est à dire Internet Explorer, Microsoft a Bord, Firefox)

3. chrome --allow-l'accès de fichier de fichiers

Ce qui ne l'onglet Réseau dans les Outils de Dev dire, est la feuille de style chargé?
la feuille de style est chargé oui.
Ane des messages d'erreur dans la console?
Non interceptée DOMException: impossible de lire le 'cssRules la propriété de "CSSStyleSheet': Ne peut pas les règles d'accès à la fenêtre.onload
Votre navigateur est toujours manquant, je ne peux pas reproduire le problème avec n'importe quel navigateur installé sur ma machine ... même pas dans IE.

OriginalL'auteur Puddle | 2018-02-12

  1. 27

    TL;DR: Chrome 64 ans, vous aurez besoin d'utiliser un développement local serveur pour tester les fonctionnalités qui dépendent de la CSS du Modèle Objet.

    Accéder à des règles CSS dans une feuille de style chargé à partir du système de fichiers local viole une Cross-Origin Resource sharing (SCRO) politique - mais Chrome ne pas appliquer ce, jusqu'à récemment, et les autres navigateurs ne semblent pas à l'appliquer encore.

    Chrome 64.0.3282.0 (publié en janvier 2018, changement complet de la liste) comprend un changement de règles de sécurité pour les feuilles de style. Je ne pouvais pas trouver ce changement dans un changelog moins détaillée que la livraison.

    Commettre a4ebe08 dans le Chrome est décrit:

    Comportement de mise à jour de CSSStyleSheet de match de spécifications pour la Sécurité de l'origine

    Spec est ici:
    https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

    Mise à jour: les méthodes suivantes maintenant jeter un SecurityError si l'
    la feuille de style n'est pas accessible:

    • cssRules() /rules()
    • insertRule()
    • deleteRule()

    Ce commit est un correctif pour le bug Sécurité: l'incohérence de la SCRO de mise en œuvre concernant les CSS et le lien de l'élément. liés W3C spec décrit en détail où l'utilisation de l'Objet CSS Modèle nécessite d'origine de l'accès.

    C'est une réelle sécurité de la contrainte et de la solution que vous avez posté (en ligne/localhost) est probablement le plus typique de la solution de contournement. Pour plus d'informations consultez MDN, Comment avez-vous mis en place un local serveur de test? - il explique pourquoi et comment utiliser un développement local serveur pour éviter la SCRO questions.

    Cela dit, il ya encore quelques problèmes ouverts et le débat autour de ce changement.

    • Ce commentaire sur l'origine de failles de sécurité se plaint que la seule manière de détecter que la feuille de style n'est pas accessible à partir de JavaScript est avec un try/catch.
    • Un Chrome bug ouvert le 23 janvier (document.les feuilles de style.cssRules est nul même avec Access-Control-Allow-Origin: *) suggère peut-être un problème de mise en œuvre avec la nouvelle règle de sécurité qui enfreint certaines solutions de contournement.
    • La spec mis en œuvre semble assez stable, mais il a encore "de Travail l'état d'Ébauche, donc qui sait où il va atterrir et de ce que les autres navigateurs vont mettre en œuvre.
    C'est bien beau tout ça, mais pourquoi ne accédant au fichier CSS à partir d'un localement chargé document (par exemple SVG graphiques), le tout via le protocole FILE://, déclencher une violation de la SCRO? Je suis de l'affichage d'un graphique SVG à partir de mon système de fichier local (graphiques.svg) via l'explorateur de fichiers de Windows (par exemple, ouvrir avec Chrome). Le SVG graphique fait référence au fichier "my.css" dans le même répertoire que le "graphique.svg fichier". L'ECMAscript dans le SVG graphiques tente d'accéder à la cssRules par: document.les feuilles de style[0].cssRules et obtient un DOMException. Semble de chargement tout à partir de la même origine: FILE://, alors pourquoi l'erreur?
    Les navigateurs de choisir comment gérer cette situation. Le W3C de la SCRO spec obtient sa définition de "l'origine" de l'RFC6454 "Le Web à l'Origine du Concept", qui dit l'origine d'un fichier:// URI est dépendant de l'implémentation.
    Voir aussi stackoverflow.com/questions/48313084/...

    OriginalL'auteur Brad Buchanan