nonce=""
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard / Content Security Policy 3 |
| 分類 | グローバル属性 |
nonce属性は、コンテンツセキュリティポリシー（CSP）で使用する暗号ノンスを示します。
HTTPヘッダー（Content-Security-Policy HTTPヘッダー）とnonce属性の値に同一の暗号ノンスをセットすることで、その文書内において読み込み・実行される要素を制限することができます。（これにより、不正に埋め込まれた要素を無効にすることができます）
- 暗号ノンスとは、Base64でエンコードされた使い捨てのランダムな文字列のことです。
Content-Security-Policy: script-src 'nonce-ABCxxxxxxxxxxxxxxxx'
<script nonce="ABCxxxxxxxxxxxxxxxx"></script>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
nonce="" |
CSP用の暗号ノンス | 文字列 | 自動生成されたランダムな文字列 |
暗号ノンスの設定について
例えば、JavaScriptの実行を制限したい場合は次のように設定します。
- 実行を許可するscript要素にnonce属性を記述します。
- ページが読み込まれる度に、サーバー側でランダムな文字列（暗号ノンス）が自動的に生成されるようにします。
- 生成された文字列を、HTTPヘッダーとnonce属性の値に自動的にセットします。
上記のように設定しておくことで、HTTPヘッダーとnonce属性の値が一致するscript要素のみが、その文書内で実行されるようになります。
不正に埋め込まれたscript要素は正当な暗号ノンスをセットできないため、CSPによって実行が阻止されることになります。
具体的なコードは以下のようになります。（赤文字の部分が暗号ノンスです）
Content-Security-Policy: script-src 'nonce-ch4hvvbHDpv7xCSvXCs3BrNggHdTzxUA'
上記は、Content-Security-Policy HTTPヘッダーによってCSPを指定した例です。JavaScriptの読み込みに関する指定なので、指示名には script-src を指定しています。また、暗号ノンスの前には nonce- の記述が必要となります。
- CSPの指定については下記のページを参考にしてください。
<script>
// スクリプト1（実行されない）
</script>
<script nonce="ABCDEFGHIJKLMNOPQRSTUVWXYZ">
// スクリプト2（実行されない）
</script>
<script nonce="ch4hvvbHDpv7xCSvXCs3BrNggHdTzxUA">
// スクリプト3（実行される）
</script>
上記は、3つのscript要素を配置した例です。スクリプト1は暗号ノンスがないため実行されず、スクリプト2も暗号ノンスが一致しないため実行されず、スクリプト3は暗号ノンスが一致するので実行されます。
指定できる要素
nonce属性はグローバル属性のため、全てのHTML要素に指定することができます。
- ただし、属性と要素の組み合わせによっては効果がない場合もあります。
- 主にscript要素で使用されているようです。
- 旧HTMLからの変更点
-
- HTML LS：一部の要素に定義されていたnonce属性が、グローバル属性として再定義されました。
使用例
- 動作確認用のサンプルのため、以下の例ではmeta要素を使ってCSPを指定しています。また、暗号ノンスは固定の文字列を使用しています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-security-policy" content="script-src 'nonce-ch4hvvbHDpv7xCSvXCs3BrNggHdTzxUA'">
<title>スクリプトの実行を制限</title>
</head>
<body>
<h1>nonce属性のテスト</h1>
<script>
// スクリプト1（実行されない）
alert('スクリプト1');
</script>
<script nonce="ABCDEFGHIJKLMNOPQRSTUVWXYZ">
// スクリプト2（実行されない）
alert('スクリプト2');
</script>
<script nonce="ch4hvvbHDpv7xCSvXCs3BrNggHdTzxUA">
// スクリプト3（実行される）
alert('スクリプト3');
</script>
</body>
</html>
- 表示例
- 対応しているブラウザでは、スクリプト1とスクリプト2は阻止され、スクリプト3のアラートだけが表示されます。
- nonce属性はグローバル属性のため、img要素などにも指定できる、、はずなのですが、ブラウザ側がまだ対応していない？ようです。（以下の例ではCSPの指示名に
img-srcを指定しています）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-security-policy" content="img-src 'nonce-ch4hvvbHDpv7xCSvXCs3BrNggHdTzxUA'">
<title>画像の読み込みを制限</title>
</head>
<body>
<h1>nonce属性のテスト</h1>
<p>2つとも同じ画像を読み込んでいます。</p>
<p><img src="sample.png" alt="SAMPLE" nonce="ch4hvvbHDpv7xCSvXCs3BrNggHdTzxUA"><br>
1つ目の画像（読み込まれる）</p>
<p><img src="sample.png" alt="SAMPLE"><br>
2つ目の画像（読み込まれない）</p>
</body>
</html>
- 表示例
- 対応しているブラウザでは、1つ目の画像だけが表示されます。（たぶん）