Claude Code के साथ Web Practical Guide

Websecurityheaderको Claude Code से正しくsettingsする

WebapplicationのsecurityにはappropriateなHTTPheadersettingsが不可欠 है।लेकिन、各headerの役割やसही値のsettingsはcomplex है।Claude Code का उपयोग करके、Projectに合ったsecurityheaderを正確にsettingsでき है।

Content Security Policy（CSP）

appropriateなCSPsettings

> Next.jsアプリ用のCSPheaderをsettingsして。
> 要件：
> - インラインスクリプトはnonce方式
> - Google Analyticsを許可
> - बाहर部fontを許可
> - レポートURIをsettings

// 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;
}

主要securityheaderlist

> सभीのsecurityheaderを一括settingsするmiddlewareをबनाओ。

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

app.use(helmet({
  contentSecurityPolicy: { /* उपरोक्तCSPsettings */ },
  strictTransportSecurity: {
    maxAge: 63072000,        // 2年
    includeSubDomains: true,
    preload: true,
  },
  referrerPolicy: {
    policy: 'strict-origin-when-cross-origin',
  },
  frameguard: { action: 'deny' },
}));

// Helmetがカバーしないaddheader
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();
});

各headerの解説

header	目的	推奨値
Content-Security-Policy	XSS・インジェクション防止	Project固有
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	ブラウザfeatures制限	ज़रूरीなfeaturesのみ許可

CSPレポートの受信

CSP違反レポートを受信して分析するendpointもClaude Code सेbuild किया जा सकता है。

// 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();
}

security監査

「SecurityHeaders.com でA+評価を取りたい」とClaude Codeに伝えれば、不足しているheaderを特定してadd提案してくれ है।

Summary

Claude Code का उपयोग करके、Websecurityheaderのsettingsを正確かつ包括的に行え है।security監査ガイドやCORSsettingsガイドも合わせてreference के लिए देखें。

securityheaderके details के लिएMDN Web Docs - HTTPheaderおよびSecurityHeaders.comをदेखें。