web-dev-qa-db-fra.com

Impossible d’accéder à cssRules à partir d’un fichier css local dans 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;}

le script fonctionne bien si vous utilisiez <style></style>

SOLUTIONS:
1. fonctionne lorsque les fichiers sont en ligne/localhost
2. fonctionne avec d'autres navigateurs (Internet Explorer, Microsoft Edge, Firefox)
3. chrome --allow-file-access-from-files

javascripthtmlcssgoogle-chromecors
17
Puddle

TL; DR: À partir de Chrome 64, vous devez utiliser un serveur de développement local pour tester les fonctionnalités qui dépendent du modèle d'objet CSS.

L’accès aux règles CSS dans une feuille de style chargée à partir du système de fichiers local constitue une violation de la politique CORS - mais Chrome ne l’a pas forcée jusqu’à récemment, et les autres navigateurs ne semblent pas encore l’appliquer.

Chrome 64.0.3282.0 (publié en janvier 2018, liste complète des modifications ) inclut une modification des règles de sécurité pour les feuilles de style. Je ne pouvais pas trouver ce changement dans un journal des modifications moins détaillé que la liste de validation complète.

Commit a4ebe08 en chrome est décrit:

Mettre à jour le comportement de CSSStyleSheet pour correspondre aux spécifications de Security Origin

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

Mise à jour: les méthodes suivantes génèrent maintenant une erreur SecurityError si la feuille de style n'est pas accessible:

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

Ce commit est un correctif pour le bogue Sécurité: implémentation CORS incohérente concernant CSS et l'élément link. La spécification W3C liée décrit en détail où l'utilisation du modèle d'objet CSS nécessite un accès identique à Origin.

Il s’agit d’une véritable contrainte de sécurité et la solution que vous avez publiée (en ligne/localhost) est probablement la solution la plus classique. Pour plus d'informations, consultez les MDN Comment configurer un serveur de test local? - il explique pourquoi et comment utiliser un serveur de développement local pour éviter les problèmes liés au CORS.

Cela dit, il y a encore des questions en suspens et un débat autour de ce changement.

  • Ce commentaire sur le bogue de sécurité d'origine se plaint que le seul moyen de détecter que la feuille de style n'est pas accessible à partir de JavaScript est d'utiliser un try/catch.
  • Un bogue Chromium ouvert le 23 janvier ( document.styleSheets.cssRules a la valeur null, même avec Access-Control-Allow-Origin: * ) suggère que la nouvelle règle de sécurité peut poser un problème d’implémentation de certaines solutions de contournement.
  • La spécification en cours d’application semble assez stable, mais elle a toujours le statut "Working Draft" (Plan de travail), donc qui sait où il atterrira et quels autres navigateurs le mettront en œuvre.
31
Brad Buchanan