CSP・セキュリティヘッダービルダー

CSP を貼り付けるか作成し、ポリシーを点検して HTTP・Nginx・Apache 用のヘッダースニペットを書き出します。解析はブラウザー内で行われ、どこにも送信されません。

ブラウザ内でローカルに実行
ポリシーエディター

既存の CSP を貼り付けて確認するか、右側のビルダーを使用します。このツールは入力されたテキストのみを解析します。

ポリシーの検出結果
CSP を貼り付けるか構築してから、 ポリシーを解析.
クイックポリシービルダー

ディレクティブ名を除いたソース式を入力してください。フィールドを空にすると、そのディレクティブは省略されます。

追加のレスポンスヘッダー

HSTS は、関連するすべてのサブドメインで HTTPS が正しく設定されている場合にのみ使用してください。生成された値は、アプリケーションの要件に照らして確認してください。

HTTP ヘッダー
Build a CSP, then generate header snippets.
Nginx
Build a CSP, then generate header snippets.
Apache
Build a CSP, then generate header snippets.

最初は制限を厳しくして、その後観察しながら調整します

CSP は、アプリケーションが実際に必要とするリソースに合わせてください。慎重に展開し、まず report-only でのテストを検討し、スクリプト・フレーム・API・サードパーティの資産を確認せずにサイト間でポリシーを流用しないでください。

Content-Security-Policy の作成・点検・書き出し

このページは Content-Security-Policy を3つの形に変換します。入力したテキストのディレクティブ単位の点検、ビルダーで組み立てた完成ポリシー、Nginx または Apache に貼り付けられるヘッダースニペットです。ポリシーはテキストとして読むだけで、サイトへリクエストは送りません。

処理はすべてタブ内で完結し、入力が KivTools に送信されることはないため、未公開のポリシーでも点検できます。

  1. 既存のポリシーをエディターに貼り付けるか、右側のビルダーに入力します。各フィールドにはソース式のみを入力し(例: img-src に 'self' data:)、空欄のフィールドはそのディレクティブを省略します。
  2. 「ポリシーを解析」を押します。検出結果は、まず構造上の問題(ディレクティブの重複、'none' と他のソースの併記)を報告し、続いて default-src、script-src、object-src、base-uri、frame-ancestors、form-action、upgrade-insecure-requests の各ディレクティブについての注意を表示します。
  3. 「スターターポリシーを読み込む」で動作する例を確認し、値を編集します。「CSP を構築」で組み立てたポリシーがエディターに書き戻され、その場で解析されます。
  4. 追加したいレスポンスヘッダー(X-Content-Type-Options、Referrer-Policy、Permissions-Policy、HTTPS を完全に導入済みなら HSTS)にチェックを入れ、「サーバースニペットを生成」を押します。
  5. 「CSP をコピー」でポリシーを、各「コピー」ボタンで3形式(HTTP、Nginx、Apache)のスニペットをコピーできます。

ポリシーの読み取り方とスニペットの範囲

ポリシーの読み取り方

テキストはセミコロンで分割され、各ディレクティブは名前とそれに続くソースリストとして読み取られます。ディレクティブ名の大文字と小文字は区別されませんが、それ以外は書かれたとおりに比較されます。最初に2つの構造チェックを行うのは、どちらもブラウザーが独断で解決し、作成者の予想としばしば逆になるためです。同じディレクティブが2回現れた場合は最初の値が使われ、後の記述は無視されます。'none' が他のソースと並んでいる場合は、'none' は適用されず無視されます。

この点検はヒューリスティックであり、検証ツールではありません。実際にポリシーを弱めがちな点(default-src の欠落、script-src の 'unsafe-inline' や 'unsafe-eval'、スクリプトのワイルドカードや data:、object-src・base-uri・frame-ancestors・form-action の欠落)を指摘しますが、完全なポリシーでもアプリケーションに合わないことはあり、ここで指摘されたポリシーが正しいこともあります。

生成されるスニペットの内容

3つの出力は同じヘッダーを運びます。入力した Content-Security-Policy の値と、チェックした最大4つの追加ヘッダーです。HTTP 表示は「名前: 値」の行、Nginx 表示は各ヘッダーを add_header ... always; で包み(エラー応答にも送信されます)、Apache 表示は Header always set ... を使います。ポリシー内の引用符とバックスラッシュは、出力先の構文に合わせてエスケープされます。

追加ヘッダーは固定値です: X-Content-Type-Options: nosniff、Referrer-Policy: strict-origin-when-cross-origin、Permissions-Policy: camera=(), geolocation=(), microphone=()、Strict-Transport-Security: max-age=63072000; includeSubDomains。それぞれの値を自サイトの要件と照らして確認してください。特に HSTS は送信した max-age の間ブラウザーを HTTPS に固定するため、関係するすべてのサブドメインが準備できてから追加してください。

ブラウザーで確認すべきこと

CSP が効くのは実際のレスポンスであり、このエディターの中ではありません。ここで厳しく見えるディレクティブでも、アプリケーションが必要とする決済スクリプト、フォント、インラインスタイルを壊すことがあります。ブロックされたソースはブラウザーのコンソールに表示されます。新しいポリシーはまずテスト環境で Content-Security-Policy-Report-Only として配信し、その後適用してレポートを監視し続けてください。

スニペットはサーバー設定の出発点であり、設定そのものの代わりにはなりません。ヘッダーがクライアントに届くかは、Web サーバー、前段の CDN やプロキシ、ページを配信する経路によって変わります。導入後にブラウザーのネットワークパネルやコマンドラインのクライアントで実際のレスポンスヘッダーを確認してください。

最近使ったツール: