Security Headers

スキル概要

コアドメイン:

• セキュリティヘッダー設定
• Content Security Policy（CSP）
• CSRF/XSS/Clickjacking 対策

必須セキュリティヘッダー

1. Content-Security-Policy（CSP）

目的: XSS 攻撃とデータインジェクション攻撃を防止

基本設定:

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self';
  frame-ancestors 'none';
`
  .replace(/\s{2,}/g, " ")
  .trim();

推奨設定（厳格）:

const strictCspHeader = `
  default-src 'self';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  font-src 'self';
  connect-src 'self';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
`
  .replace(/\s{2,}/g, " ")
  .trim();

2. X-Frame-Options

目的: Clickjacking 攻撃を防止

'X-Frame-Options': 'DENY'
// または
'X-Frame-Options': 'SAMEORIGIN'

3. X-Content-Type-Options

目的: MIME タイプスニッフィング攻撃を防止

'X-Content-Type-Options': 'nosniff'

4. Strict-Transport-Security（HSTS）

目的: HTTPS 接続を強制

'Strict-Transport-Security': 'max-age=31536000; includeSubDomains'

5. Referrer-Policy

目的: リファラー情報の制御

'Referrer-Policy': 'strict-origin-when-cross-origin'

6. Permissions-Policy

目的: ブラウザ機能へのアクセス制御

'Permissions-Policy': 'camera=(), microphone=(), geolocation=()'

Next.js での設定

next.config.js

const nextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "Content-Security-Policy",
            value: cspHeader,
          },
          {
            key: "X-Frame-Options",
            value: "DENY",
          },
          {
            key: "X-Content-Type-Options",
            value: "nosniff",
          },
          {
            key: "Strict-Transport-Security",
            value: "max-age=31536000; includeSubDomains",
          },
          {
            key: "Referrer-Policy",
            value: "strict-origin-when-cross-origin",
          },
          {
            key: "Permissions-Policy",
            value: "camera=(), microphone=(), geolocation=()",
          },
        ],
      },
    ];
  },
};

CSRF 対策

SameSite Cookie 属性

cookies().set("session_token", token, {
  sameSite: "lax", // またはstrict
});

CSRF トークン検証（追加保護）

// ミドルウェア
export async function verifyCsrfToken(request: Request): Promise<boolean> {
  if (request.method === "GET" || request.method === "HEAD") {
    return true; // 読み取りのみ操作はスキップ
  }

  const token = request.headers.get("X-CSRF-Token");
  const sessionToken = cookies().get("csrf_token")?.value;

  return token === sessionToken;
}

リソース参照

cat .claude/skills/security-headers/resources/csp-configuration.md
cat .claude/skills/security-headers/resources/csrf-prevention.md

テンプレート参照

cat .claude/skills/security-headers/templates/nextjs-security-headers-template.js

スクリプト実行

node .claude/skills/security-headers/scripts/validate-security-headers.mjs next.config.js

判断基準

• すべての OWASP 推奨ヘッダーが設定されているか？
• CSP はアプリケーション要件と互換性があるか？
• CSRF 対策は多層化されているか？
• Cookie 属性は適切か（HttpOnly、Secure、SameSite）？

ベストプラクティス

1. CSP 厳格化: 'unsafe-inline'/'unsafe-eval'を避ける
2. HSTS 有効化: HTTPS 強制
3. SameSite Cookie: Lax/Strict 推奨
4. 多層 CSRF 対策: SameSite + CSRF トークン

バージョン履歴