[解決済み】scriptやstyle要素のHTMLの「nonce」属性は何のため？

質問

W3Cによると、HTML5.1では、新しい属性として nonce に対して style と script ウェブサイトのコンテンツセキュリティポリシーで使用できるもの。

この属性が実際に何をするのか、この属性を使用すると何が変わるのか、ググってみたのですが結局わかりませんでした。

どのように解決するのですか？

その nonce 属性を使用すると、特定のインラインの script と style 要素を使用しないようにし、CSP unsafe-inline ディレクティブ（これは すべて インライン script / style を禁止するという CSP の重要な機能はそのまま維持されます。 script / style を一般に公開します。

そのため nonce 属性は、特定のスクリプトやスタイル要素のインラインコンテンツが、（悪意のある）第三者によって文書に注入されたのではなく、文書が提供されるサーバーを管理する者によって意図的に文書に入れられたことを、ブラウザに伝えるための方法です。

ウェブの基礎知識 コンテンツセキュリティポリシー 記事の どうしても使いたい場合は ... のセクションに良い例があります。 nonce 属性は、次のようなステップに相当します。

1. Webサーバーが特定のドキュメントに対して受け取る各リクエストについて、バックエンドに暗号的に安全な乱数生成器から少なくとも128ビットのランダムなbase64エンコード文字列を作成させます。 EDNnf03nceIOfn39fn3e9h3sdfa . これがあなたのノンスです。

2. ステップ 1 で生成された nonce を使用して、すべてのインラインの script / style ホワイトリストに登録したい場合は、バックエンドのコードに nonce 属性を、nonce を値として送信する前にドキュメントに追加します。

    <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">…</script>
   
   

3. ステップ 1 で生成された nonce を取り、その前に nonce- のソース・リストの値の中からそれを含む CSP ヘッダをバックエンドが生成するようにします。 script-src または style-src :

    Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
   
   

つまり、nonce を使用する仕組みは、バックエンドがインラインのコンテンツのハッシュを生成する代わりとなります。 script または style を許可し、そのハッシュを CSP ヘッダの適切なソース・リストに指定します。

ブラウザは、送信された nonce の値がページのリクエストごとに変わることをチェックしない (できない) ので、上記の 1 をスキップしてバックエンドが nonce に対して動的に何もしないことも可能です (まったくお勧めしませんが)。 nonce 属性に静的な値を指定して doc の HTML ソースに挿入し、その同じ nonce 値を含む静的な CSP ヘッダを送信します。

しかし、そのような方法で静的な nonce を使用したくない理由は、そもそも nonce を使用する目的そのものが失われてしまうからです。 unsafe-inline .

どの要素が「nonceable」であるかという点については。CSP 仕様では現在、ブラウザが nonce をチェックするのは script と style 要素で構成されます。以下は、仕様の詳細です。

• で https://w3c.github.io/webappsec-csp/#match-element-to-source-list は、手順2を参照してください。
  
  typeが"script"または"style"で、§6.6.3.1 Is element nonceable? は "Nonceable" を返す場合...

• で https://w3c.github.io/webappsec-csp/#is-element-nonceable は、その 要素はノンシーブルか？ をチェックするだけではありません。 script / style 要素に制限していますが、仕様書では上記の部分のみで、その制限の対象は script と style . そのため、それ以外の要素にnonceを記述した場合、現在の仕様ではブラウザはそれを無視することが要求されています。