Web ToolBox

CSPパーサー

CSPヘッダーを解析し各ディレクティブを視覚的に表示

CSPを解析する

CSPパーサーとは？

CSP（Content Security Policy）ヘッダーを解析して、各ディレクティブをわかりやすく表示するツールです。複雑なセキュリティ設定を視覚化し、問題のある箇所を自動で診断します。

Webサイトのセキュリティ設定を確認したいとき、ブラウザの開発者ツールで取得したCSPヘッダーをこのツールに貼り付けるだけで、設定内容の妥当性をすぐに確認できます。

クイック診断機能

CSPを入力すると、基本的なパターンマッチングによる簡易チェックを実行します。以下のような一般的な問題を検出します。

  • 'unsafe-inline'や'unsafe-eval'の使用 - XSS攻撃のリスクが高まる危険な設定
  • ワイルドカード（*）の使用 - すべてのドメインを許可してしまう
  • default-srcの未設定 - フォールバック設定がない
  • HTTPの使用 - 暗号化されていない通信を許可している

診断結果は重要度（HIGH/MEDIUM/LOW）で表示されますが、あくまで基本的なチェックです。包括的なセキュリティ評価には専門家による監査が必要です。

CSPの基礎知識

Content Security Policy（CSP）は、XSS攻撃やデータインジェクション攻撃を防ぐためのHTTPレスポンスヘッダーです。ブラウザが読み込めるリソースの種類と場所を制限することで、Webサイトのセキュリティを強化します。

よく使うディレクティブ

リソース読み込み系（Fetch Directives）

  • default-src - すべてのリソースタイプのデフォルト設定
  • script-src - JavaScriptファイルの読み込み元
  • style-src - CSSファイルの読み込み元
  • img-src - 画像の読み込み元
  • connect-src - fetch、XMLHttpRequest、WebSocketなどの接続先
  • font-src - Webフォントの読み込み元
  • media-src - 動画・音声ファイルの読み込み元
  • frame-src - iframeで埋め込めるページ

ドキュメント系（Document Directives）

  • base-uri - <base>タグで指定できるURL
  • sandbox - iframeのsandbox属性と同様の制限

ナビゲーション系（Navigation Directives）

  • form-action - フォームの送信先
  • frame-ancestors - このページを埋め込めるページ（クリックジャッキング対策）

ソース指定の種類

  • 'self': 同じオリジン（ドメイン）からのリソースのみ許可
  • 'none': すべてのリソースを禁止
  • 'unsafe-inline': インラインスクリプトやスタイルを許可（セキュリティリスクあり）
  • 'unsafe-eval': eval()などの動的コード実行を許可（セキュリティリスクあり）
  • https:: HTTPS経由のすべてのリソースを許可
  • data:: data: スキームを使用したリソースを許可
  • 特定のドメイン: https://example.comなど、明示的に許可されたドメイン

主な機能

カテゴリ別の整理表示

ディレクティブをFetch、Document、Navigation、Reportingの4つのカテゴリに分類して表示します。関連する設定をまとめて確認でき、全体像を把握しやすくなります。

色分けされたバッジ表示

各ソース値を色分けして表示します。

  • 赤（危険） - 'unsafe-inline'、'unsafe-eval'など、セキュリティリスクが高い設定
  • 黄（警告） - data:やblob:など、注意が必要な設定
  • 青（キーワード） - 'self'、'none'など、CSPの予約語
  • 緑（ドメイン） - https://example.comなど、信頼されたホスト
  • グレー（その他） - 通常の文字列

プライバシー保護

すべての処理はブラウザ内で完結し、入力したCSP設定が外部サーバーに送信されることはありません。

使い方

ブラウザでCSPを取得する

Chrome/Edge/Firefoxの開発者ツールで確認できます。

  1. F12キーで開発者ツールを開く
  2. Networkタブを開く
  3. ページをリロード
  4. 最初のドキュメント（通常は一番上）をクリック
  5. Headersタブでcontent-security-policyを探す

解析と診断

取得したCSPヘッダーをテキストエリアに貼り付けると、自動的に解析が始まります。

default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com

入力直後に以下の情報が表示されます。

  • クイック診断 - セキュリティ上の問題点（HIGH/MEDIUM/LOWで分類）
  • ポリシー内訳 - カテゴリ別に整理されたディレクティブ一覧
  • 色分けバッジ - 各ソース値の安全性レベル

結果の見方

この例ではstyle-src 'unsafe-inline'が警告として表示されます。インラインスタイルを許可しているため、XSS攻撃のリスクが高まっています。

こんなときに使える

新規サイト立ち上げ時

CSPを初めて設定するとき、構文が正しいか、意図した制限になっているかを確認できます。本番環境に適用する前のチェックツールとして活用できます。

CSP違反エラーの解決

ブラウザコンソールに「Content Security Policy violation」が出たら、現在の設定を可視化して、どのディレクティブが原因かを特定します。

セキュリティ監査

既存サイトのCSP設定を見直すとき、'unsafe-inline'や'unsafe-eval'などの危険な設定が残っていないか、一括でチェックできます。

外部スクリプト追加時

Google AnalyticsやCDNから読み込むスクリプトを追加する際、どのディレクティブに何を追加すべきかを整理できます。

より安全なCSP設定のコツ

'unsafe-inline'を外す

インラインスクリプトやスタイルを使わず、外部ファイル化することで'unsafe-inline'を削除できます。どうしても必要な場合は、nonceまたはハッシュ値を使った許可を検討してください。

ワイルドカードを避ける

https://*.example.comのようなサブドメインワイルドカードは、攻撃者が制御できるサブドメインがあると危険です。必要なサブドメインを個別に列挙する方が安全です。

object-srcは'none'に

プラグインコンテンツを使わないなら、object-src 'none'を明示的に指定しましょう。デフォルトでは制限されないため、設定漏れによる脆弱性を防げます。

Report-Onlyモードでテスト

新しいCSPを適用する前に、Content-Security-Policy-Report-Onlyヘッダーで1〜2週間テストします。実際のユーザー環境でのCSP違反をレポートとして収集し、問題がないことを確認してから本番適用すると安全です。