CSPジェネレーター
Content Security Policyヘッダーを視覚的に生成
CSPディレクティブ
生成された出力
使用例
基本的な制限ポリシー
自分のドメインからのリソースのみを許可し、インラインスタイルと画像用のdata URIを含むシンプルなポリシー。
CDN対応ポリシー
jsDelivr、cdnjs、Google Fontsなどの人気CDNからのスクリプトとスタイルの読み込みを許可するポリシー。
厳格なセキュリティポリシー
デフォルトですべてをブロックし、自分のドメインからの特定のリソースタイプのみを許可する高度に制限的なポリシー。
機能
ビジュアルビルダー
チェックボックスとドロップダウンでCSPヘッダーを視覚的に構築、手動の構文は不要
サーバー設定
Nginx、Apache、metaタグ用のすぐに使える設定スニペットを取得
CSP検証
一般的なセキュリティ問題とベストプラクティス違反についてCSPをテスト
プライバシー優先
すべての処理はブラウザ内でローカルに行われ、サーバーにデータは送信されません
使い方
ディレクティブを選択
必要なCSPディレクティブを有効にし、チェックボックスやカスタムドメインを使用して各ディレクティブのソースを選択します。
出力を確認
生成されたCSPをHTTPヘッダー、metaタグ、またはサーバー設定スニペットとして表示します。問題がないかテストしてください。
コピーしてデプロイ
生成されたCSPをコピーして、Webサーバーの設定またはHTMLドキュメントに追加します。
よくある質問
Content Security Policyとは
Content Security Policy（CSP）は、ブラウザにどのコンテンツソースを信頼すべきかを伝えるHTTPヘッダーです。ホワイトリストと考えてください：スクリプト、スタイルシート、画像、フォントが承認されたソースからでなければ、ブラウザはブロックします。XSS攻撃に対する最強の防御です。
CSP構文を手書きするのが大変な理由
実際のCSPヘッダーは数十のディレクティブで500文字以上になることがよくあります。セミコロン1つのミスですべてが壊れます。このツールはチェックボックス、ドロップダウン、カスタムドメインフィールドで有効なCSP構文を自動生成します。
最も一般的なCSPミス
最大のミスはスクリプトにunsafe-inlineを使うこと。2番目はワイルドカード（*）オリジン。3番目はdefault-srcの忘れ。このツールにはデプロイ前にこれらを検出するバリデーターがあります。
CSPを始める
まずreport-onlyポリシーで何が壊れるかを確認しましょう。レポートを監視し、正当なソースを追加して違反を修正し、その後エンフォースメントモードに切り替えます。
プライバシー
CSP設定はブラウザから一切出ません。サーバー呼び出しなし、保存なし、トラッキングなし。