CSP

CSP とは

CSP (Content Security Policy) は、Web ページで実行可能なリソース (スクリプト、スタイル、画像) の出所を制限するセキュリティ機構である。XSS 攻撃の被害を大幅に軽減する。詳細は「CSP Nonce」を参照。

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	JavaScript
style-src	CSS
img-src	画像
connect-src	fetch, XHR, WebSocket
font-src	フォント
frame-src	iframe

CSP の段階的導入

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'; ...

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

インラインスクリプトの許可を以下にまとめる。

方法	セキュリティ
'unsafe-inline'	❌ XSS を防げない
'nonce-xxx'	✅ リクエストごとにランダム
'sha256-xxx'	✅ スクリプトのハッシュ

よくある CSP の設定

よくある CSP の設定を図で示す。

# 静的サイト (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;

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