CSPとは
Content-Security-Policy（CSP）とは、Webページがどこからリソースを読み込んでよいかをブラウザに指示するセキュリティの仕組みです。HTTPレスポンスヘッダーとして設定します。
例えるなら、「この部屋に入っていいのはリストに載っている人だけ」というルールを作るようなものです。リストにない場所からのスクリプトや画像の読み込みを、ブラウザがブロックしてくれます。
XSS攻撃の仕組みとCSPの役割
XSS（クロスサイトスクリプティング）は、Webセキュリティにおいて最も多い攻撃の一つです。攻撃の流れを簡単に説明します：
- 攻撃者が掲示板やコメント欄に悪意のあるスクリプト（JavaScriptコード）を投稿する
- 他のユーザーがそのページを開くと、埋め込まれたスクリプトが実行される
- スクリプトがCookie（ログイン情報）を盗んだり、偽のログイン画面を表示したりする
CSPを設定すると、たとえ攻撃者がスクリプトを埋め込むことに成功しても、ブラウザがそのスクリプトの実行をブロックします。許可されていないインラインスクリプトや外部スクリプトは動作しません。
主要なディレクティブ一覧
CSPではさまざまな種類のリソースに対して、読み込み元を制御できます：
default-src：他のディレクティブで指定されていないリソースのデフォルトscript-src：JavaScriptの読み込み元style-src：CSSの読み込み元img-src：画像の読み込み元font-src：フォントの読み込み元connect-src：Ajax、WebSocketなどの接続先frame-src：iframeの読み込み元object-src：プラグイン（Flash等）の読み込み元
各ディレクティブには以下のような値を指定できます：
'self'：同じオリジン（自分のサイト）のみ許可'none'：すべてブロック'unsafe-inline'：インラインのスクリプト/スタイルを許可（非推奨）https:：HTTPS経由のリソースのみ許可- 具体的なドメイン名：
https://cdn.example.com
CSPの設定例
基本的な設定例を紹介します：
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; object-src 'none'この設定では：
- 基本的に自分のサイトからのリソースのみ許可
- JavaScriptは自サイトと指定CDNからのみ
- CSSは自サイトとインラインスタイルを許可
- 画像は自サイト、data URI、HTTPS経由を許可
- プラグイン（Flash等）は完全にブロック
段階的な導入方法
CSPをいきなり厳しく設定すると、サイトが正常に動作しなくなる可能性があります。段階的に導入しましょう：
- ステップ1：
Content-Security-Policy-Report-Onlyヘッダーを使い、違反があってもブロックせずにレポートだけ受け取る - ステップ2：レポートを分析し、正当なリソースの読み込み元をCSPに追加する
- ステップ3：違反レポートが落ち着いたら、
Content-Security-Policyヘッダーに切り替えて実際にブロックを開始する - ステップ4：定期的にレポートを確認し、ポリシーを調整する
まずはReport-Onlyモードから始めることで、サイトを壊すリスクなくCSPを導入できます。