Chrome 64 でローカル ファイルから CSS ルールにアクセスできないのはなぜですか?

Chrome 64 でローカル CSS ファイルから CSS ルールにアクセスできない

最近、ウェブ開発者は、Chrome 64 でローカル CSS ファイルから CSS ルールにアクセスできないという問題に遭遇しました。 Chrome バージョン 64。この問題は、ブラウザに実装されたセキュリティの変更が原因である可能性があります。

問題

以前、Chrome では開発者がローカル ファイルから CSS ルールにアクセスできました。ただし、バージョン 64 では、この機能は制限されています。スタイルシートの cssRules プロパティにアクセスしようとすると、開発者は未定義の応答またはエラーに遭遇します。

<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>

解決策

この問題に対処するために、開発者はいくつかの回避策を特定しました。

1. オンラインまたはローカルホストからファイルを提供します:サーバー上で HTML および CSS ファイルをホストするか、ローカルホストを使用すると、CORS ポリシーは強制されず、CSS ルールにアクセスできます。
2. 他のブラウザを使用する: Internet Explorer などの他のブラウザMicrosoft Edge と Firefox は現在、同じ CORS 制限を適用していません。
3. コマンドラインoption: Chrome には、ローカル ファイルから CSS ルールへのアクセスを許可するコマンドライン オプション --allow-file-access-from-files が用意されています。このオプションは慎重に使用する必要があります。

説明

この問題の根本原因は、Chrome のセキュリティ ルールの変更にあります。 Chrome は現在、異なるオリジンからのリソースへのアクセスを制限する Cross-Origin Resource Sharing (CORS) ポリシーに準拠しています。ローカル ファイルは HTML ファイルとは生成元が異なるため、これらのファイルから CSS ルールにアクセスすると CORS ポリシーに違反します。

未解決の問題

Chrome に CORS ポリシーを実装するとセキュリティが向上しますが、また、いくつかの未解決の問題も発生しています:

• JavaScript からスタイルシートにアクセスできないかどうかを検出する唯一の方法は、try/catch を使用することです。ブロック。
• 特定の回避策を妨げる実装上の問題が Chrome に存在する可能性があります。
• CSS オブジェクト モデル仕様はまだ「作業草案」ステータスにあり、将来の変更の余地が残されています。

以上がChrome 64 でローカル ファイルから CSS ルールにアクセスできないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。