Curious TechieDev Toolbox
← すべてのガイド/セキュリティ•10 min read

Content Security Policy (CSP) の仕組みとXSS完全防御手法

CSP Level 3のディレクティブ構文、暗号学的ナンス(nonce)による厳格な保護、ハッシュ検証、ゼロトラストHTTPヘッダーの設計。

ⓘ重要ポイント (要約)
  • CSPは、ブラウザが読み込み・実行可能なスクリプトやリソースの配信元を制限するHTTPレスポンスヘッダーです。
  • クロスサイトスクリプティング（XSS）および悪意あるデータインジェクションに対する最強の防御策です。
  • 最新のCSP Level 3では、ドメインホワイトリストではなく暗号学的ナンス (nonce) やハッシュ値による厳格な制限を推奨します。
  • frame-ancestors 'none' は、従来の X-Frame-Options を置き換えてクリックジャッキングを防ぎます。
  • 本番適用前の検証には Content-Security-Policy-Report-Only ヘッダーを活用します。

1. Content Security Policy (CSP) とは何か？

Content Security Policy (CSP) は、W3Cによって標準化されたHTTPレスポンスヘッダーであり、ブラウザに対して読み込みおよび実行を許可する信頼されたコンテンツソースを厳格に指定します。

スクリプト、スタイルシート、画像、外部API通信の接続先を制限することで、CSPはWebアプリケーションにおける最大の脅威であるクロスサイトスクリプティング (XSS) やデータ窃取攻撃に対する最も強固な多層防御壁となります。

2. 主要ディレクティブの役割と推奨値

ディレクティブ制御対象安全な推奨デフォルト
default-src未指定の全リソースディレクティブに対するフォールバック'self'
script-src実行を許可するJavaScriptソース'self' 'nonce-...'
style-src許可するスタイルシートのオリジンおよびインラインCSS'self' 'unsafe-inline'
connect-srcFetch、XMLHttpRequest、WebSocketの通信先'self' https://api.domain.com
frame-ancestors本ページを <iframe> 内に埋め込み可能な親オリジン'none'

3. Nonce（ノンス）とHashベースの厳格ポリシー

初期のCSPはドメインのホワイトリスト指定（例：script-src https://cdn.example.com）に依存していましたが、CDN上にホストされたJSONPエンドポイントやオープンリダイレクトによる迂回攻撃が頻発しました。

現代の厳格なCSP（Level 3）は、リクエストごとに生成される使い捨ての暗号学的ノンス（Nonce）を用いてスクリプト実行を許可します：

Content-Security-Policy: script-src 'nonce-rAnd0m123' 'strict-dynamic'; object-src 'none';

4. クリックジャッキング対策: frame-ancestors の活用

従来使用されていた X-Frame-Options: DENY も互換性のため現在も機能しますが、現代のWeb標準では複数の特定親ドメインのみをきめ細かく許可できる CSP の frame-ancestors ディレクティブが推奨されます。

5. 安全に本番適用するための3段階導入計画

フェーズ1: 監視モード (Report-Only): 本番環境を壊さずに潜在的な違反を検知するため、<code>Content-Security-Policy-Report-Only</code> ヘッダーとレポート収集エンドポイントを設定して違反ログを監視します。
フェーズ2: インラインハンドラの排除: HTML内の <code>onclick="..."</code> 等のインライン属性を外部JSファイルのイベントリスナーへ移行します。
フェーズ3: 強制適用と保護の完成: ヘッダーを <code>Content-Security-Policy</code> に切り替え、<code>object-src 'none'</code> を付与して Flash やプラグインの不正実行も完全に遮断します。