Claude Code के साथ Web Security Headers Practical Guide

Web Security Headers को Claude Code के साथ सही तरीके से Configure करें

Web application की security के लिए appropriate HTTP headers का configuration अनिवार्य है। लेकिन हर header की भूमिका और सही values को set करना complex है। Claude Code का उपयोग करके, आप project के अनुसार accurate security headers configure कर सकते हैं।

Content Security Policy (CSP)

Appropriate CSP Configuration

> Next.js app के लिए CSP header configure करो।
> Requirements:
> - Inline scripts के लिए nonce-based approach
> - Google Analytics allow करो
> - External fonts allow करो
> - Report URI configure करो

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

मुख्य Security Headers की List

> सभी security headers को एक साथ configure करने वाला middleware बनाओ।

// Express.js में configuration example
import helmet from 'helmet';

app.use(helmet({
  contentSecurityPolicy: { /* ऊपर दी गई CSP configuration */ },
  strictTransportSecurity: {
    maxAge: 63072000,        // 2 साल
    includeSubDomains: true,
    preload: true,
  },
  referrerPolicy: {
    policy: 'strict-origin-when-cross-origin',
  },
  frameguard: { action: 'deny' },
}));

// Helmet जो cover नहीं करता, वैसे additional headers
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	Purpose	Recommended Value
Content-Security-Policy	XSS/injection prevention	Project-specific
Strict-Transport-Security	HTTPS enforcement	max-age=63072000; includeSubDomains; preload
X-Content-Type-Options	MIME sniffing prevention	nosniff
X-Frame-Options	Clickjacking prevention	DENY
Referrer-Policy	Referrer info control	strict-origin-when-cross-origin
Permissions-Policy	Browser feature restrictions	केवल आवश्यक features allow करें

CSP Reports Receive करना

CSP violation reports receive करके analyze करने वाला 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 violation:', {
      blockedUri: report['blocked-uri'],
      violatedDirective: report['violated-directive'],
      documentUri: report['document-uri'],
    });
  }
  res.status(204).end();
}

Security Audit

“SecurityHeaders.com पर A+ rating चाहिए” — ऐसा Claude Code को कहने पर, वह missing headers identify करके उन्हें add करने के सुझाव देता है।

Summary

Claude Code का उपयोग करके, web security headers को accurately और comprehensively configure किया जा सकता है। Security audit guide और CORS configuration guide को भी reference के लिए देखें।

Security headers के details के लिए MDN Web Docs - HTTP Headers और SecurityHeaders.com देखें।