CSP nonceとは？HTML共有・AI生成サイトでの意味をやさしく解説

ひとことで言うと

CSP nonce（ノンス）とは、Content Security Policy の文脈で「このスクリプトまたはスタイルは信頼済み」とサーバーが証明するために使う使い捨てトークンです。サーバーがレスポンスごとにランダムな文字列（例: `abc123`）を生成し、HTTPヘッダーの CSP に `script-src 'nonce-abc123'` と書き、同時にHTML内の `<script nonce="abc123">` にも同じ値を付与することで、その script タグだけが実行を許可されます。

nonceが一致しない、あるいは nonce が付いていないインラインスクリプトはたとえ正規のコードでもブラウザがブロックします。AI生成HTMLにインラインの `<script>` が含まれている場合、共有サービスが CSP を付与していると nonce のないスクリプトが実行されなくなるため、ページが意図通りに動かない原因になります。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

ギガサイト便などのHTTP配信サービスがセキュリティ対策として CSP ヘッダーを設定している場合、アップロードしたHTMLの `<script>` タグに正しい nonce が付いていないとスクリプトがすべてブロックされます。この場合、ページは表示されるが JavaScript の動作がゼロになるという症状が出ます。

サービス側が nonce を動的に挿入してくれる仕組みを持っていれば問題は起きませんが、静的ファイル配信の場合は nonce を動的生成できないため、CSP の `script-src` に `'nonce-*'` ではなく外部スクリプトの URL をホワイトリストで記載する形式か、`'unsafe-inline'` を使う設定になっていることが多いです。共有前にサービスのドキュメントでCSPポリシーを確認しましょう。

よくある誤解

「nonce はセキュリティを高める魔法の設定」と思われがちですが、同じ nonce 値をリクエストをまたいで使い回すと意味を失います。nonce は毎リクエストでサーバーが新しい値を生成しなければならず、静的HTMLファイルとは相性が悪い技術です。静的ファイル共有では nonce より `script-src` のURL指定や `integrity` 属性（SRI）のほうが現実的な選択肢です。

「CSP nonce を付ければ XSS は防げる」という過信も危険です。nonce はインラインスクリプトの実行可否を制御しますが、外部スクリプトの読み込みURLが信頼できない場合や DOM ベースの XSS は別の対策が必要です。AI生成コードをそのまま公開する際は nonce の有無だけでなく、コード全体のレビューも欠かせません。

安全に使うための注意点

AI生成HTMLを静的ファイルとして共有する場合、インラインスクリプトを外部 `.js` ファイルに切り出すことで nonce の問題を回避しやすくなります。外部ファイルは `script-src` に URL を列挙するか、`integrity` 属性でハッシュを指定するCSP形式で保護できます。ChatGPTやClaudeが生成したHTMLにインライン script が多い場合は、共有前にこの分離作業を行うことを推奨します。

共有後にブラウザのコンソールに「Refused to execute inline script because it violates the following Content Security Policy directive」と表示された場合、CSP nonce またはハッシュが合っていないサインです。この場合、サービスが出力するnonce値を確認してスクリプトタグに追加するか、インラインコードを外部ファイル化して再アップロードする対処を取ってください。