カテゴリー: 開発ツール
CSPジェネレーター
ディレクティブからContent-Security-Policyヘッダーを作成
default-src、script-src、style-srcなど、Content-Security-Policyの各ディレクティブに許可するソースを設定するだけで、完成したヘッダーの値と、各ディレクティブが何を許可しているかを示す見やすい一覧表が手に入ります。すべてブラウザ内でローカルに生成されます。
| ディレクティブ | 許可するソース |
|---|---|
default-src | 'self' |
script-src | 'self' |
style-src | 'self' 'unsafe-inline' |
img-src | 'self' data: |
font-src | 'self' |
connect-src | 'self' |
frame-ancestors | 'none' |
object-src | 'none' |
base-uri | 'self' |
form-action | 'self' |
upgrade-insecure-requests | — |
Content-Security-Policy ヘッダー
default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
Content-Security-Policyヘッダーは、ページがスクリプト・スタイル・画像などのリソースをどのソースから読み込んでよいかをブラウザに伝えるもので、クロスサイトスクリプティングに対する最も強力な防御策の一つです。各ディレクティブには 'self'、'unsafe-inline'、https: や特定のドメインといったソースをスペース区切りで指定しますが、この構文を手で正しく書くのは意外と手間がかかります。このツールはディレクティブごとに1つの入力欄からヘッダーを組み立て、同じポリシーを表としても表示するので、公開前に何を許可しているのかをきちんと確認できます。
使い方
- 制限したい各ディレクティブに、許可するソースを設定します。
- 必要に応じて upgrade-insecure-requests や block-all-mixed-content を切り替えます。
- ディレクティブの一覧を確認し、ヘッダーの値をコピーします。
- Content-Security-Policyレスポンスヘッダーとして送信するか、調整中はまず Content-Security-Policy-Report-Only から始めます。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- ディレクティブを空欄にするとどうなりますか。
- ここで空欄にしたディレクティブはヘッダーから完全に省かれ、通常はdefault-srcの設定にフォールバックします。まずdefault-srcに 'self' など妥当な既定値を設定しておくとよいでしょう。
- まずReport-Onlyでテストすべきですか。
- はい。同じ値をContent-Security-Policyの代わりにContent-Security-Policy-Report-Onlyとして送信すると、ブラウザのコンソールやreport-uri経由で、そのポリシーが実際に適用された場合に何がブロックされていたかを、ページを壊さずに確認しながら調整できます。
- ポリシーの生成にあたって、内容がどこかに送信されますか。
- いいえ。ヘッダーの文字列は入力内容からブラウザ内で直接組み立てられます。