Content Security Policy (CSP) 完全ガイド：基礎から本番まで

CSPはXSS攻撃に対する最も効果的な防御手段の一つです。ブラウザにどのリソースの読み込みを許可するかを指示することで、脆弱性があっても悪意のあるコード注入を防ぎます。

CSPとは？なぜ重要？

CSPはHTTPレスポンスヘッダーで、ブラウザが読み込み可能なリソースを制御します。

CSPの仕組み

ブラウザがCSPヘッダーを受信すると、ルールに違反するリソースをブロックします：

Browser receives HTTP response:
  Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

Browser allows:
  ✅ <script src="/app.js">              (same origin = 'self')
  ✅ <script src="https://cdn.example.com/lib.js">

Browser blocks:
  ❌ <script src="https://evil.com/steal.js">
  ❌ <script>alert('XSS')</script>       (inline = not allowed)

CSPディレクティブ一覧

ソース値の説明

段階的な実装

ステップ1: レポートオンリーモードで開始

サイトを壊さずに違反を特定：

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

ステップ3: ポリシーを構築

結果に基づいてポリシーを作成：

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';
  object-src 'none';
  upgrade-insecure-requests

一般的なCSP設定

厳格なポリシー

Content-Security-Policy:
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self';
  font-src 'self';
  connect-src 'self';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  object-src 'none';
  upgrade-insecure-requests

中程度（典型的なSPA）

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: blob: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-ancestors 'self'

Google Analytics付き

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
  img-src 'self' https://www.google-analytics.com https://www.googletagmanager.com;
  connect-src 'self' https://www.google-analytics.com https://analytics.google.com

実装方法

Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;

Apache

Header set Content-Security-Policy "default-src 'self'; script-src 'self'"

Express.js

// Using helmet middleware (recommended)
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://cdn.example.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
  }
}));

// Or manually
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self'");
  next();
});

HTMLメタタグ

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self'">

よくある間違い

FAQ