web-dev-qa-db-ja.com

Chrome 64のローカルcssファイルからcssRulesにアクセスできません

問題の簡単な例を次に示します。

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

<style></style>を使用する場合、スクリプトは正常に動作します

解決策：
1。ファイルがオンライン/ localhostの場合に機能します
2。他のブラウザ（つまり、Internet Explorer、Microsoft Edge、Firefox）で動作します
3。 chrome --allow-file-access-from-files

javascripthtmlcssgoogle-chromecors
17
Puddle

TL; DR：Chrome 64の時点で、ローカル開発サーバーを使用してCSSオブジェクトモデルに依存する機能をテストする必要があります。

ローカルファイルシステムからロードされたスタイルシートのCSSルールにアクセスすると、 Cross-Origin Resource Sharing（CORS） ポリシーに違反しますが、Chromeは最近までこれを強制しませんでした。他のブラウザはまだそれを実施していないようです。

Chrome 64.0.3282.0（2018年1月リリース、 完全な変更リスト ）には、スタイルシートのセキュリティルールの変更が含まれています。完全なコミットリストよりも詳細な変更ログでは、この変更を見つけることができませんでした。

コミット a4ebe08 Chromiumで説明されています：

SecurityStyleの仕様に合わせてCSSStyleSheetの動作を更新します

仕様はこちら： https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

更新：スタイルシートにアクセスできない場合、次のメソッドがSecurityErrorをスローするようになりました。

  • cssRules（）/ rules（）
  • insertRule（）
  • deleteRule（）

このコミットは、バグの修正です セキュリティ：CSSおよびリンク要素に関する一貫性のないCORS実装 リンクされたW3C仕様は、CSSオブジェクトモデルの使用が同一生成元アクセスを必要とする場所について詳しく説明しています。

これは実際のセキュリティ制約であり、投稿したソリューション（online/localhost）はおそらく最も一般的な回避策です。詳細については、MDNを確認してください ローカルテストサーバーの設定方法 -ローカル開発サーバーを使用してCORSの問題を回避する理由と方法を説明します。

とはいえ、この変更に関してはまだいくつかの未解決の問題と議論があります。

  • このコメント 元のセキュリティバグでは、JavaScriptからスタイルシートにアクセスできないことを検出する唯一の方法はtry/catch。
  • 1月23日に開かれたChromiumのバグ（ document.styleSheets.cssRulesはAccess-Control-Allow-Origin：* でもnullです）は、特定の回避策を破る新しいセキュリティルールの実装の問題がある可能性を示唆しています。
  • 実装されている仕様はかなり安定しているように見えますが、まだ「Working Draft」ステータスになっているので、誰がどこに着くのか、他のブラウザが何を実装するのかを知っています。
31
Brad Buchanan