nonce 属性CSP の ワンタイムトークンを指定する

nonce 属性は、CSP(Content Security Policy)によって、文書内に読み込まれた script 要素や、style 要素の内容を実行するかを決定するために利用される nonce(number used once / ワンタイムトークン) を指定します。

CSP とは、あらかじめその文書で読み込まれることが想定されている JavaScript などのコンテンツを、ホワイトリストとして指定することによって、攻撃者によって挿入される悪意のあるスクリプトの読み込みを遮断し、クロスサイトスクリプティング (XSS) など、インジェクション攻撃から Web サイト や Web アプリケーションを保護するための仕組みです。

Content-Security-Policy HTTP レスポンスヘッダによって送信した値と同じものを、script 要素や style 要素に付与した nonce 属性に指定することで、その値が一致した場合のみ script 要素や style 要素の内容が実行されます。

nonce の値は、リクエストごとにランダムな文字列が生成される必要があります。それによって外部からは値が推測できず、インジェクション攻撃を防止することができます。

具体的な利用例

Content-Security-Policy HTTP レスポンスヘッダによって下記のように、ポリシーが送信されている場合、

Content-Security-Policy:
  script-src 'nonce-DhcnhD3khTMePgXwdayK9BsMqXjhguVV' 'strict-dynamic'

下記の script 要素は、ワンタイムトークンの値が一致するため実行されます。しかし、この値が一致しない、あるいは値が空の場合は実行されません。

<script
  src="https://example.com/script.js"
  nonce="DhcnhD3khTMePgXwdayK9BsMqXjhguVV"
>
</script>

nonce 属性の仕様

この属性を使用できる要素

仕様書の該当箇所

4.2.6. The style element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ