【HTML Living Standard】nonce属性の使い方
nonce属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
nonceプロパティは、コンテンツセキュリティポリシー（CSP）と連携してウェブページのセキュリティを強化するために使用される情報を保持するプロパティです。HTMLのグローバル属性の一つであり、主に<script>要素や<style>要素に適用されます。
このプロパティの主な役割は、ウェブページに埋め込まれたインラインスクリプトやインラインスタイルが、信頼できるソースからのものであることをブラウザに証明することです。サーバー側で毎回ランダムかつ予測不可能な一意のnonce値（number used once、一度限り有効な値）を生成し、これをHTTPレスポンスヘッダーのContent-Security-Policyと、HTMLドキュメント内の対応する<script>または<style>要素の両方に付与します。
ブラウザは、CSPヘッダーで指定されたnonce値と、各要素に設定されたnonce値が完全に一致する場合にのみ、そのインラインコードの実行を許可します。これにより、クロスサイトスクリプティング（XSS）攻撃などによって悪意のあるインラインコードがウェブページに挿入されても、ブラウザはその実行をブロックし、セキュリティリスクを大幅に軽減できます。
nonce属性を効果的に利用するには、サーバー側での適切なnonce値の生成と、リクエストごとに異なる値を使い回しなく使用する厳格な管理が不可欠です。この仕組みは、現代のウェブアプリケーションにおけるセキュリティ防御の重要な要素の一つとして機能します。
構文(syntax)
1<script nonce="random_string_generated_by_server"></script>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML nonce 属性でスクリプト・スタイルを保護する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Nonce 属性の使用例</title> 7 <!-- 8 nonce 属性は、Content Security Policy (CSP) と組み合わせて使用されます。 9 これにより、信頼できるスクリプトやスタイルのみが実行されるように制御し、 10 クロスサイトスクリプティング (XSS) 攻撃からの保護を強化します。 11 12 このHTMLコードを機能させるには、サーバー側でCSP HTTPヘッダーを設定し、 13 そのヘッダー内の nonce 値と、HTML内の nonce 属性の値を一致させる必要があります。 14 例: Content-Security-Policy: script-src 'nonce-R4Nd0M_N0nC3_V4Lu3'; 15 --> 16 <style nonce="R4Nd0M_N0nC3_V4Lu3"> 17 /* 18 このスタイルブロックは、HTTPヘッダーのCSP設定と 19 nonce値が一致する場合にのみブラウザによって適用されます。 20 */ 21 body { 22 font-family: Arial, sans-serif; 23 margin: 20px; 24 background-color: #f4f4f4; 25 } 26 h1 { 27 color: #333; 28 } 29 p { 30 color: #555; 31 } 32 .message { 33 color: green; 34 font-weight: bold; 35 } 36 </style> 37</head> 38<body> 39 <h1>Nonce 属性の基本</h1> 40 <p>このページは、<code>nonce</code> 属性を使用してインラインスクリプトとスタイルシートを保護する方法を示します。</p> 41 42 <!-- 43 このインラインスクリプトは、HTTPヘッダーのCSP設定で指定された 44 nonce値 (ここでは "R4Nd0M_N0nC3_V4Lu3") と一致する場合にのみ実行されます。 45 nonce値は、通常サーバーによってリクエストごとに一意に生成されます。 46 --> 47 <script nonce="R4Nd0M_N0nC3_V4Lu3"> 48 document.addEventListener('DOMContentLoaded', () => { 49 const messageElement = document.createElement('p'); 50 messageElement.classList.add('message'); 51 messageElement.textContent = 'このスクリプトは nonce 属性のおかげで安全に実行されました。'; 52 document.body.appendChild(messageElement); 53 console.log('Script with nonce executed successfully.'); 54 }); 55 </script> 56</body> 57</html>
HTMLのnonce属性は、Living Standardで定義されているGlobal attributes（グローバル属性）の一つで、ウェブセキュリティを強化するために利用されます。これはContent Security Policy (CSP) と組み合わせて使用され、クロスサイトスクリプティング（XSS）攻撃などからウェブサイトを保護する重要な役割を担います。
この属性は、<script>要素や<style>要素といったインラインで記述されるコードに対して適用されます。具体的には、ウェブブラウザがサーバーから受信するHTTPヘッダーに設定されたCSPのnonce値と、HTML内の該当する要素に記述されたnonce属性の値が一致するかどうかを検証します。値が一致した場合にのみ、そのスクリプトが実行されたり、スタイルが適用されたりします。これにより、信頼できない不正なコードが実行されることを防ぎます。
サンプルコードでは、<style>タグと<script>タグにnonce="R4Nd0M_N0nC3_V4Lu3"が設定されています。これは、サーバーのCSPヘッダーで同じ値が指定されている場合に限り、これらの要素が有効になることを示しています。nonce値は通常、セキュリティのためにリクエストごとにサーバー側で一意に生成されます。このnonce属性自体に特別な引数や戻り値はありません。
HTMLのnonce属性は、クロスサイトスクリプティング（XSS）攻撃から保護するため、Content Security Policy（CSP）と組み合わせて使用されます。重要な点は、HTML内のnonce属性の値が、サーバーから送られるCSP HTTPヘッダー内のnonce値と完全に一致しなければ、インラインスクリプトやスタイルシートは実行・適用されないことです。サンプルコードのnonce値は説明目的であり、本番環境ではリクエストごとにサーバー側で一意の値を生成し、動的にHTMLとCSPヘッダーに埋め込む必要があります。固定値のまま運用するとセキュリティ上の問題となるため、必ず動的な値を使用してください。この仕組みは、HTML単体ではなく、サーバー側のCSP設定と連携して初めて機能することを理解しておくことが重要です。
HTML nonce属性でセキュリティを強化する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML nonce属性のサンプルコード</title> 7 <!-- 8 `nonce`属性は、Content Security Policy (CSP) と組み合わせて使用され、 9 Webページに埋め込まれたインラインスクリプトやスタイルが信頼できるものであることをブラウザに伝えます。 10 これにより、悪意のあるコードの実行（クロスサイトスクリプティング: XSS攻撃など）を防ぐセキュリティ機能です。 11 12 本来、`nonce`の値は、サーバーがリクエストごとにユニークで予測不可能な文字列を動的に生成し、 13 HTTPレスポンスヘッダーのCSP（例: Content-Security-Policy: script-src 'self' 'nonce-UNIQUE_VALUE';） 14 とHTML内の<script>や<style>タグの`nonce`属性の両方に設定する必要があります。 15 16 このサンプルコードでは理解を助けるため、`my-unique-random-nonce-value`という固定値を使用しています。 17 --> 18 <style nonce="my-unique-random-nonce-value"> 19 /* このインラインスタイルは、nonce属性がCSPと一致する場合にのみ適用されます。 */ 20 body { 21 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 22 background-color: #f0f4f8; 23 color: #333; 24 text-align: center; 25 padding: 50px; 26 margin: 0; 27 } 28 h1 { 29 color: #0056b3; 30 margin-bottom: 20px; 31 } 32 p { 33 font-size: 1.1em; 34 line-height: 1.6; 35 } 36 </style> 37</head> 38<body> 39 <h1>Nonce属性を使用したWebページの例</h1> 40 <p>このページは、<code>nonce</code>属性を使ってコンテンツのセキュリティを強化しています。</p> 41 42 <script nonce="my-unique-random-nonce-value"> 43 /* このインラインスクリプトは、nonce属性がCSPと一致する場合にのみ実行されます。 */ 44 document.addEventListener('DOMContentLoaded', () => { 45 const messageElement = document.createElement('p'); 46 messageElement.textContent = 'インラインスクリプトがセキュリティポリシーに従って実行されました！'; 47 document.body.appendChild(messageElement); 48 console.log('nonce属性付きスクリプトが正常に動作しました。'); 49 }); 50 </script> 51</body> 52</html>
HTMLのnonce属性は、ウェブページのセキュリティを強化するためのグローバル属性です。これはContent Security Policy (CSP) と組み合わせて使用され、特に<script>や<style>タグといったインラインのコンテンツが信頼できるものであることをブラウザに伝えます。悪意のあるスクリプト（クロスサイトスクリプティング: XSS攻撃など）の実行を防ぐことが主な目的です。
具体的には、サーバーが生成した予測不可能なユニークな文字列をHTTPレスポンスヘッダーのCSP設定（例: Content-Security-Policy: script-src 'self' 'nonce-UNIQUE_VALUE';）と、HTML内の該当する<script>や<style>タグのnonce属性に設定します。ブラウザは、これらのnonce値が一致した場合にのみ、そのインラインスクリプトやスタイルを実行または適用します。これにより、信頼されていないコードが実行されるのを防ぎます。
サンプルコードでは、セキュリティ機能の理解を助けるためにmy-unique-random-nonce-valueという固定値をstyleタグとscriptタグの両方に設定しています。しかし、実際の運用では、サーバーがリクエストごとに動的に異なるnonce値を生成することが必須となります。この属性は引数を取らず、何らかの値を返すものでもありません。
nonce属性は、Content Security Policy (CSP) と連携し、Webページのセキュリティを高める重要な機能です。悪意のあるスクリプトやスタイルが実行されるクロスサイトスクリプティング（XSS）攻撃などを防ぐために使用します。サンプルコードでは理解を助けるため固定値を使用していますが、本番環境では絶対にこの固定値や予測可能な値を使わないでください。 安全に利用するためには、サーバーが各リクエストごとにユニークで予測不可能な文字列を動的に生成し、その値をHTTPレスポンスヘッダーのCSPとHTML内の<script>や<style>タグのnonce属性の両方に正確に設定する必要があります。これにより、信頼できるインラインコンテンツのみがブラウザで実行されるようになります。