CSP（コンテンツセキュリティポリシー）レシピ
実務で本当に使う構成をまとめた Content-Security-Policy ヘッダー値のコレクションです。厳格なスターターから Google Fonts・アナリティクス・YouTube 埋め込み・nonce ベースのスクリプト・クリックジャッキング対策まで。カードをクリックしてポリシーをコピーし、Content-Security-Policy ヘッダーの値として設定してください。カード上部のバーはディレクティブ 1 つが 1 マスで、琥珀色のマスは見直す価値のある unsafe-* ソースを含むディレクティブです。
厳格なスターター（同一オリジンのみ）
default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'同一オリジン + 画像はどこからでも（https）
default-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'API オリジンを1つ呼ぶ SPA
default-src 'self'; connect-src 'self' https://api.example.com; img-src 'self' data:; object-src 'none'Google Fonts を許可
default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; object-src 'none'Google アナリティクス 4
default-src 'self'; script-src 'self' https://www.googletagmanager.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com; img-src 'self' https://*.google-analytics.com; object-src 'none'YouTube 埋め込みを許可
default-src 'self'; frame-src https://www.youtube-nocookie.com https://www.youtube.com; img-src 'self' https://i.ytimg.com; object-src 'none'nonce + strict-dynamic スクリプト
script-src 'nonce-{RANDOM}' 'strict-dynamic'; object-src 'none'; base-uri 'none'実用型：インラインスタイルを許可
default-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'http サブリソースを https に昇格
default-src 'self'; upgrade-insecure-requestsクリックジャッキング対策（フレーム禁止）
frame-ancestors 'none'Report-Only 導入スターター
default-src 'self'; report-uri /csp-report; report-to csp-endpointよくある質問
- CSP はどこに設定しますか？
- できれば HTTP レスポンスヘッダーとして設定してください。サーバー・CDN・ホスティング設定で Content-Security-Policy: <値> の形です。<meta http-equiv="Content-Security-Policy"> タグもほとんどのディレクティブで動作しますが、frame-ancestors・report-uri・report-to はヘッダー専用のため、これらを含むレシピは必ずヘッダーで設定します。
- サイトを壊さずに導入するには？
- Content-Security-Policy-Report-Only ヘッダー（ここの Report-Only レシピ）から始めてください。ブラウザは何もブロックせず違反だけを報告します。1 週間ほどレポートを観察し、サイトに本当に必要なソースを追加してから、同じ値を強制ヘッダーに切り替えます。
- nonce-{RANDOM} プレースホルダーの使い方は？
- {RANDOM} をレスポンスごとに新しく生成した base64 値に置き換え、同じ値を各スクリプトタグに nonce="…" として入れます。strict-dynamic と組み合わせると、自分が出力したスクリプト（とそれが読み込むもの）だけが正確に許可され、注入されたものはすべてブロックされます。ホスト許可リストの管理より強力です。
- 'unsafe-inline' はなぜ琥珀色ですか？
- インラインコードの許可は XSS 攻撃が突く代表的な穴です。注入された <script> や style 属性が自分のコードのように実行されます。style-src 'unsafe-inline' レシピはインラインスタイルを注入するフレームワークがまだ多いための実用型で、暫定策として扱ってください。スクリプトには nonce やハッシュを使う方がよく、だからここのレシピに script-src 'unsafe-inline' はありません。
