CSP ヘッダージェネレーター

Strict CSP のスタート構成

Strict プリセットは web.dev で解説されている nonce ベースの strict CSP に沿っています。HTTP ヘッダータブの出力は次のとおりです。

Content-Security-Policy: default-src 'self'; script-src 'nonce-{RANDOM}' 'strict-dynamic'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests

'nonce-{RANDOM}' はプレースホルダーで、そのままでは使えません。サーバーはレスポンスごとに 128 ビット以上の新しいランダム値に置き換え、同じ値をレンダリングする各 <script> の nonce=”…” に書き込む必要があります。ポリシーにプレースホルダーが残っている間、ツールは警告を表示します。固定の nonce を静的な設定に貼り付けないでください。一度見た人なら誰でも、注入したスクリプトで使い回せます。

以前のこのプリセットは ‘self’ を使っていましたが、プレースホルダーに置き換えました。‘strict-dynamic’ があると、CSP Level 3 は一致する nonce かハッシュがない限り HTML パーサーが挿入したスクリプトをすべてブロックし、‘self’ やホストソースを確認しなくなります（CSP3 §8.2）。そのため script-src ‘self’ ‘strict-dynamic’ だけでは、現行の Chrome・Firefox・Safari でスクリプトが 1 つも実行されません。ツールはこの組み合わせに警告を出すようになりました。nonce を設定できない静的ビルドのサイトでは、プレースホルダーを削除してハッシュ計算機で各インラインスクリプトのハッシュを追加するか、「中程度」プリセットから始めてください。

Express (helmet) タブはレスポンスごとの処理まで出力します。crypto.randomBytes(16).toString(‘base64’) を res.locals.cspNonce に入れるミドルウェアを追加し、script-src に関数を渡します。helmet の README にある書き方です。テンプレート側では、この値を各 script タグに出力してください。Nginx タブはプレースホルダーを残してコメントを付けます。Nginx はアプリケーションが出力する HTML に同じ nonce を書き込めないためです。

よくある落とし穴

• ’none’ は単独でしか効きません。 他のソースと並べると ‘none’ は効果がなく、他のソースは許可されます。
• HTTP ヘッダー専用のディレクティブがあります。 CSP3 §3.3 では <meta> 内の frame-ancestors・report-uri・sandbox は無視され、Report-Only もありません。ツールは <meta> タブからこれらを除き、警告を出します。
• ‘strict-dynamic’ には nonce かハッシュが必要です。 ないとページ上のスクリプトがすべてブロックされます。ツールが警告します。
• hash / nonce があると ‘unsafe-inline’ は無効化されます。 モダンブラウザは安全側を優先します。
• default-src は必ず定義すること。 未指定の fetch 系ディレクティブは default-src をフォールバックします。これがないと将来追加されたディレクティブにフォールバックが効きません。
• カスタムホストにセミコロンは入れられません。 セミコロンはポリシー全体を切ってしまいます。

Hash と Nonce の使い分け

静的なインライン内容（解析タグ、クリティカル CSS、SSR で出力される共通スクリプト）は hash を使います。静的 HTML やエッジキャッシュとも相性がよく、リクエストごとの値を必要としません。

動的にレンダリングされる内容は nonce です。サーバーがヘッダーに ‘nonce-XYZ’ を埋め込み、レンダリングする全 <script nonce=“XYZ”> に同じ値を付与します。‘strict-dynamic’ と組み合わせれば、信頼されたスクリプトの子スクリプトも自動的に信頼され、巨大なホスト許可リストを保守する必要がなくなります。

デプロイ早見表

• Nginx：Nginx タブの内容を server ブロックに貼って reload。always はエラー応答にもヘッダーを付けます。
• Apache：.htaccess や httpd.conf に Header always set Content-Security-Policy ”…”。
• Express / Node：helmet スニペットを貼り付け、useDefaults を必ず false にして自分のポリシーが helmet デフォルトと暗黙にマージされないようにします。
• Cloudflare Pages / Vercel / Netlify：HTTP ヘッダー欄をそれぞれのヘッダー設定（_headers、vercel.json、netlify.toml）に貼ります。