Pourquoi ne puis-je pas accéder aux règles CSS à partir d'un fichier local dans Chrome 64 ?

Impossible d'accéder aux règles CSS à partir d'un fichier CSS local dans Chrome 64

Récemment, les développeurs Web ont rencontré un problème empêchant l'accès aux règles CSS à partir d'un fichier CSS local dans Chrome version 64. Ce problème peut être attribué aux modifications de sécurité mises en œuvre dans le navigateur.

Le problème

Dans le passé, Chrome permettait aux développeurs d'accéder aux règles CSS à partir de fichiers locaux. Cependant, avec la version 64, cette fonctionnalité a été restreinte. Lorsqu'ils tentent d'accéder à la propriété cssRules d'une feuille de style, les développeurs rencontrent une réponse non définie ou une erreur.

<code class="html"><script>
window.onload = function() {
  try {
    alert(document.styleSheets[0]); // works
    alert(document.styleSheets[0].cssRules); // undefined
  } catch (e) {
    alert(e); // error
  }
}
</script>

<link rel='stylesheet' href='myStyle.css'>

<!-- myStyle.css -->
body {
  background-color: green;
}</code>

Solutions

Pour résoudre ce problème, les développeurs ont identifié plusieurs solutions de contournement :

1. Servez les fichiers en ligne ou depuis localhost : En hébergeant les fichiers HTML et CSS sur un serveur ou en utilisant localhost, la politique CORS n'est pas appliquée et les règles CSS sont accessibles.
2. Utiliser d'autres navigateurs : D'autres navigateurs tels qu'Internet Explorer, Microsoft Edge et Firefox n'appliquent actuellement pas la même restriction CORS.
3. Option de ligne de commande : Chrome fournit une option de ligne de commande --allow-file-access-from-files qui permet d'accéder aux règles CSS à partir de fichiers locaux. Cette option doit être utilisée avec prudence.

Explication

La cause première de ce problème réside dans une modification des règles de sécurité de Chrome. Chrome adhère désormais à la politique de partage de ressources cross-origine (CORS), qui restreint l'accès aux ressources d'origines différentes. Étant donné que les fichiers locaux ont une origine différente de celle du fichier HTML, l'accès aux règles CSS à partir de ces fichiers viole la politique CORS.

Problèmes ouverts

Bien que la mise en œuvre de la politique CORS dans Chrome améliore la sécurité, elle a également créé des problèmes ouverts :

• La seule façon de détecter si une feuille de style est inaccessible à partir de JavaScript consiste à utiliser un bloc try/catch.
• Il peut y avoir un problème d'implémentation dans Chrome qui rompt certaines solutions de contournement.
• La spécification du modèle d'objet CSS est toujours au statut « Working Draft », laissant la place à de futures modifications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!