CSPヘッダー生成ツール
Content-Security-Policyヘッダーをビジュアルに構築。ディレクティブを選択し、値を設定して、HTTPヘッダーまたはHTML metaタグとしてエクスポートします。
このツールについて
CSPヘッダー生成ツールは、仕様を暗記しなくてもContent-Security-Policy（CSP） ヘッダーを構築できる無料のブラウザベースツールです。CSPは現在利用可能な最も 強力なHTTPセキュリティヘッダーの1つであり、ページ上でロードが許可される コンテンツのソース（スクリプト、スタイルシート、画像、フォント、フレームなど） をブラウザに正確に指示します。適切に設定されたポリシーは、クロスサイト スクリプティング（XSS）攻撃、クリックジャッキング、データインジェクション 脆弱性に対する最も効果的なヘッダーレベルの防御策です。
その重要性にもかかわらず、CSPヘッダーを手書きすることはエラーが起きやすいです。
ディレクティブ名のタイプミス、'self' の引用符の欠落、セミコロンの
忘れなどが、ポリシー全体を壊すか、さらに悪いことに、気づかないうちに弱体化
させる可能性があります。このツールは、一般的なソース値ごとにチェックボックスと
カスタムドメイン用の専用テキストフィールドを提供することで、これらのリスクを
排除します。オプションを切り替えると、完全なヘッダー文字列と同等のHTML
<meta> タグがリアルタイムで再生成され、すぐにコピーできます。
このジェネレーターは、本番環境のポリシーで一般的に使用される13のディレクティブ
をカバーしています：default-src、script-src、style-src、
img-src、font-src、connect-src、media-src、
object-src、frame-src、base-uri、form-action、
frame-ancestors、report-uri。ワンクリックのプリセット（StrictとPermissive）
により、要件に合わせてカスタマイズ可能な合理的な出発点が得られます。
すべての処理はクライアントサイドのJavaScriptを使用してブラウザ内で完結します。
データがサーバーに送信されることはないため、内部ドメインやステージングドメインを
参照するポリシーも安全に設定できます。ポリシーが完成したら、
HTTPヘッダーアナライザー
で他のセキュリティヘッダーと合わせてテストするか、
メタタグ生成ツール
で付随する<meta>タグを生成してください。サーバーレスポンスヘッダーの
完全なセットを構成する必要がある場合は、
Nginx設定ジェネレーター
がCSPをウェブサーバー設定に統合するのに役立ちます。
使い方
- Strict Preset または Permissive Preset をクリックしてすぐに始めるか、個々のディレクティブのチェックボックスを有効にしてゼロから構築します。
- 有効にした各ディレクティブで、ソース値チップ（
'self'、'none'、https:など）をクリックしてオン・オフを切り替えます。有効な値は青色でハイライトされます。 - カスタムドメイン（例：
cdn.example.com、*.googleapis.com）をチップの下のテキストフィールドに入力します。複数のドメインはスペースまたはカンマで区切ります。 - 右側に生成されたHTTP Header出力を確認します。完全な
Content-Security-Policy: ...文字列がリアルタイムで更新されます。 - サーバーヘッダーの代わりに
<meta>要素でCSPをデプロイする場合は、HTML Meta Tag パネルに切り替えます。 - Copy Header または Copy Meta Tag（または Ctrl+Shift+C）をクリックして出力をクリップボードにコピーします。
- Clear ボタンを使用してすべてのディレクティブをリセットし、最初からやり直します。
よくある質問
Content-Security-Policy（CSP）とは何ですか？
Content-Security-Policyは、ページ上でロードが許可されるコンテンツのソース（スクリプト、スタイル、画像、フォント、フレームなど）をブラウザに指示するHTTPレスポンスヘッダーです。信頼できる許可リストにソースを制限することで、攻撃者による悪意のあるスクリプトやコンテンツの注入を防止し、クロスサイトスクリプティング（XSS）攻撃に対する最も効果的なヘッダーレベルの防御策となります。
HTTPヘッダーとmetaタグの違いは何ですか？
どちらも同じポリシーをブラウザに配信します。HTTPヘッダー（Content-Security-Policy: ...）はウェブサーバーのレスポンスで設定され、HTML metaタグ（<meta http-equiv="Content-Security-Policy" content="...">）はページの<head>に埋め込まれます。ヘッダー方式はHTMLが解析される前に適用されるため推奨されます。また、frame-ancestorsやreport-uriなどの一部のディレクティブはヘッダーでのみサポートされ、metaタグでは機能しません。
CSPディレクティブの'self'とは何を意味しますか？
'self'は現在のオリジン、つまりドキュメント自体と同じスキーム、ホスト、ポートを指します。例えば、ページがhttps://example.comから配信されている場合、'self'はhttps://example.comからのリソースを許可しますが、https://cdn.example.comやhttp://example.com（スキームが異なる）からのリソースはブロックします。ほとんどのディレクティブで最も一般的な開始値です。
StrictプリセットとPermissiveプリセットはどう使い分けますか？
Strictプリセットはすべての外部ソースをブロックし、インラインスクリプトとevalを禁止します。すべてのリソースを制御できるセキュリティ重視のアプリケーションに最適です。Permissiveプリセットはソースにhttps:、インラインスタイル、evalを許可します。サイトが実際に必要とする外部リソースを監査している間の一時的なポリシーとして適しています。厳格に始めて、選択的に緩和することをお勧めします。
'unsafe-inline'はなぜリスクがあるのですか？
'unsafe-inline'は、インラインの<script>や<style>タグ、onclickハンドラー、style属性の実行を許可します。これにより、HTMLを注入できる攻撃者がインラインスクリプトも注入できるため、そのリソースタイプに対するCSPのXSS保護が実質的に無効化されます。可能な限り、スクリプトを外部ファイルに移動し、'unsafe-inline'の代わりにnonceやハッシュを使用してください。
データは安全ですか？
はい。すべてのポリシー生成はクライアントサイドのJavaScriptを使用してブラウザ内で完全に行われます。ドメイン名、ディレクティブの選択、生成されたヘッダーを含むいかなるデータもサーバーに送信されることはありません。内部ドメイン、ステージングドメイン、本番ドメインを参照するポリシーを、プライバシーの懸念なく安全に設定できます。
CSPポリシーのデプロイ後はどのようにテストしますか？
Content-Security-Policyの代わりにContent-Security-Policy-Report-Onlyヘッダーを使用してデプロイし、リソースをブロックせずに違反を監視します。report-uriまたはreport-toディレクティブを追加して違反レポートを収集します。正当なリソースがブロックされていないことを確認したら、強制モードのContent-Security-Policyヘッダーに切り替えます。ブラウザのDevTools（コンソールタブ）でもCSP違反をリアルタイムで確認できます。
関連ツール
メタタグ生成ツール
HTMLメタタグ、Open Graph、Twitter Cardタグをライブプレビュー付きで生成します。
HTTPヘッダー分析
任意のURLのHTTPレスポンスヘッダーを取得・分析。セキュリティヘッダー、キャッシュ、CORSなどを確認。
Nginx設定生成
リバースプロキシ、SSL、静的ファイル、リダイレクトをGUIで設定してNginxサーバーブロックを生成します。
SRIハッシュジェネレーター
スクリプトやスタイルシート用のSubresource Integrityハッシュを生成します。SHA-256、SHA-384、SHA-512対応。
.htaccess生成
リダイレクト、CORS、キャッシュ、gzip圧縮、セキュリティヘッダー用のApache .htaccessルールを生成します。
Content-Typeヘッダービルダー
正しいMIMEタイプ、charset、boundaryパラメータでContent-Typeヘッダーを構築します。ヘッダーまたはcurlフラグとしてコピー。
CORSヘッダービルダー
CORSヘッダーをビジュアルに構築します。許可オリジン、メソッド、ヘッダー、認証情報をライブヘッダー出力で設定。
Cache-Controlビルダー
Cache-Controlヘッダーをトグルスイッチで視覚的に構築。各ディレクティブの設定、期間プリセット、サーバー設定スニペット付き。