Web 实战指南：Claude Code 实战指南

Web安全头部を通过 Claude Code正确地配置する

Web应用の安全には合适的HTTP头部配置が不可或缺。然而、每个头部の役割や正しい値の配置は很复杂。借助 Claude Code，项目に合った安全头部を正確に配置可以。

Content Security Policy（CSP）

合适的CSP配置

> Next.js应用用のCSP头部を配置して。
> 要件：
> - インラインスクリプトはnonce方式
> - Google Analyticsを允许
> - 外部字体を允许
> - レポートURIを配置

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import crypto from 'crypto';

export function middleware(request: NextRequest) {
  const nonce = crypto.randomBytes(16).toString('base64');
  const response = NextResponse.next();

  const csp = [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}' https://www.googletagmanager.com`,
    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com`,
    `font-src 'self' https://fonts.gstatic.com`,
    `img-src 'self' data: https:`,
    `connect-src 'self' https://www.google-analytics.com`,
    `frame-ancestors 'none'`,
    `base-uri 'self'`,
    `form-action 'self'`,
    `report-uri /api/csp-report`,
  ].join('; ');

  response.headers.set('Content-Security-Policy', csp);
  response.headers.set('x-nonce', nonce);

  return response;
}

主要安全头部列表

> 所有的安全头部を一括配置する中间件创建。

// Express.jsでの配置例
import helmet from 'helmet';

app.use(helmet({
  contentSecurityPolicy: { /* 上記CSP設定 */ },
  strictTransportSecurity: {
    maxAge: 63072000,        // 2年
    includeSubDomains: true,
    preload: true,
  },
  referrerPolicy: {
    policy: 'strict-origin-when-cross-origin',
  },
  frameguard: { action: 'deny' },
}));

// Helmetがカバーしない添加头部
app.use((req, res, next) => {
  res.setHeader('Permissions-Policy',
    'camera=(), microphone=(), geolocation=(), payment=(self)');
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
  res.setHeader('Cross-Origin-Resource-Policy', 'same-origin');
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

每个头部の解説

头部	目的	推奨値
Content-Security-Policy	XSS・インジェクション防止	项目固有
Strict-Transport-Security	HTTPS強制	max-age=63072000; includeSubDomains; preload
X-Content-Type-Options	MIMEスニッフィング防止	nosniff
X-Frame-Options	点击ジャッキング防止	DENY
Referrer-Policy	リファラー情報制御	strict-origin-when-cross-origin
Permissions-Policy	浏览器機能制限	必要な機能のみ允许

CSPレポートの接收

CSP違反レポートを接收して分析する端点も通过 Claude Code构建可以。

// pages/api/csp-report.ts
export default function handler(req, res) {
  if (req.method === 'POST') {
    const report = req.body['csp-report'];
    console.warn('CSP違反:', {
      blockedUri: report['blocked-uri'],
      violatedDirective: report['violated-directive'],
      documentUri: report['document-uri'],
    });
  }
  res.status(204).end();
}

安全監査

「SecurityHeaders.com でA+評価を取りたい」と让 Claude Code伝えれば、不足している头部を特定して添加提案してくれます。

总结

借助 Claude Code，Web安全头部の配置を正確かつ包括的に行えます。安全監査指南やCORS配置指南也建议一并参考。

安全头部的详细信息请参阅MDN Web Docs - HTTP头部およびSecurityHeaders.com。