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를 참고하세요.