CSP

CSP とは

CSP (Content Security Policy) は、Web ページで実行可能なリソース (スクリプト、スタイル、画像) の出所を制限するセキュリティ機構である。XSS の被害を抑える手段の 1 つで、入力の検証や出力時のエスケープの代わりにはならない。

CSP の仕組み

サーバーが HTTP レスポンスヘッダーで許可するリソースの出所を宣言し、ブラウザーがそのポリシーに違反するリソースの読み込みや実行をブロックする。インラインスクリプトや外部の不正なスクリプトが注入されても、CSP で許可されていなければ実行されない。

サーバーがレスポンスヘッダーで CSP を送信:
  Content-Security-Policy: script-src 'self' https://cdn.example.com

ブラウザが CSP に違反するリソースをブロック:
  ✅ <script src="/app.js"> → 同一オリジン → 許可
  ✅ <script src="https://cdn.example.com/lib.js"> → 許可リスト → 許可
  ❌ <script src="https://evil.com/malware.js"> → ブロック
  ❌ <script>alert(1)</script> → インラインスクリプト → ブロック

主要なディレクティブ

default-src は、種類ごとのディレクティブを書いていないリソースに使われる既定の値になる。表の script-src 以下を個別に書くと、その種類だけ既定と違う許可を与えられる。

CSP の段階的導入

Content-Security-Policy-Report-Only ヘッダーで送ったポリシーは違反をブロックせず報告だけに使われるため、本番の動作を止めずに許可の不足を確かめられる。下の例の report-uri は CSP Level 3 (2026 年 10 月時点で W3C の作業草案) で非推奨とされ、後継の report-to への移行は「CSP レポート」の項で説明している。

1. Report-Only モードで監視
   Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

2. 違反レポートを分析
   → どのリソースがブロックされるか確認

3. ポリシーを調整
   → 必要なオリジンを許可リストに追加

4. 本番適用
   Content-Security-Policy: default-src 'self'; ...

インラインスクリプトの許可

nonce か hash を指定すると、同じディレクティブの 'unsafe-inline' は無視される。nonce はポリシーを送るたびに作り直す推測できない値で、仕様は符号化前で 128 ビット以上を推奨している。

よくある CSP の設定

どちらの例も default-src 'self' で既定を自オリジンに絞り、必要な種類だけを個別に広げている。SPA の例では、API の呼び出し先を connect-src に加えている。

# 静的サイト (S3 + CloudFront)
default-src 'self';
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self';

# SPA + API
default-src 'self';
script-src 'self';
connect-src 'self' https://api.example.com;

全体像を把握するには関連書籍も有用。