Web Practical Guide dengan Claude Code

Webセキュリティheader dengan Claude Code: 正しくpengaturan

Webaplikasi セキュリティ tepatなHTTPheaderpengaturan 不可欠.Namun、各header 役割や正しい値 pengaturan kompleks.Claude Code 使えば、proyek 合ったセキュリティheader 正確 pengaturan bisa dilakukan.

Content Security Policy（CSP）

tepatなCSPpengaturan

> Next.jsaplikasi用 CSPheader konfigurasi.
> 要件：
> - インラインscript nonce方式
> - Google Analytics 許可
> - 外部font 許可
> - レポートURI pengaturan

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

主要セキュリティheaderdaftar

> すべて セキュリティheader 一括pengaturanするmiddleware buatkan.

// Express.js pengaturan例
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 カバーし tidakpenambahanheader
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();
});

penjelasan 各header

header	目的	推奨値
Content-Security-Policy	XSS・インジェクション防止	proyek固有
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	browser機能制限	diperlukanな機能 み許可

penerimaan CSPレポート

CSP違反レポート penerimaan 分析 endpoint juga Claude Code pembangunan bisa dilakukan.

// 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+評価 取りたい」 dan Claude Code 伝えれば、不足header 特定 penambahan提案 くれ.

Summary

Dengan Claude Code, Webセキュリティheader pengaturan 正確かつ包括的 行え.セキュリティ監査panduanやCORSpengaturanpanduan juga 合わせて参考 .

Untuk セキュリティheaderの詳細, lihat MDN Web Docs - HTTPヘッダーおよびSecurityHeaders.com.