Panduan Praktis Web Security Headers dengan Claude Code

Konfigurasi Web Security Headers dengan Benar pakai Claude Code

Buat security aplikasi web, konfigurasi HTTP headers yang tepat itu wajib. Tapi peran tiap header dan nilai yang benar biasanya kompleks. Pakai Claude Code, kamu bisa konfigurasi security headers secara akurat sesuai kebutuhan proyek.

Content Security Policy (CSP)

Konfigurasi CSP yang Tepat

> Konfigurasi CSP header untuk aplikasi Next.js.
> Requirements:
> - Inline script pakai metode nonce
> - Izinkan Google Analytics
> - Izinkan font eksternal
> - Konfigurasi report 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;
}

Daftar Security Headers Utama

> Buat middleware yang mengkonfigurasi semua security headers sekaligus.

// Contoh konfigurasi di Express.js
import helmet from 'helmet';

app.use(helmet({
  contentSecurityPolicy: { /* konfigurasi CSP di atas */ },
  strictTransportSecurity: {
    maxAge: 63072000,        // 2 tahun
    includeSubDomains: true,
    preload: true,
  },
  referrerPolicy: {
    policy: 'strict-origin-when-cross-origin',
  },
  frameguard: { action: 'deny' },
}));

// Header tambahan yang tidak di-cover oleh 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();
});

Penjelasan Tiap Header

Header	Tujuan	Nilai yang Direkomendasikan
Content-Security-Policy	Mencegah XSS/injection	Spesifik per proyek
Strict-Transport-Security	Memaksa HTTPS	max-age=63072000; includeSubDomains; preload
X-Content-Type-Options	Mencegah MIME sniffing	nosniff
X-Frame-Options	Mencegah clickjacking	DENY
Referrer-Policy	Kontrol informasi referrer	strict-origin-when-cross-origin
Permissions-Policy	Membatasi fitur browser	Izinkan hanya fitur yang dibutuhkan

Menerima CSP Report

Endpoint untuk menerima dan menganalisis laporan pelanggaran CSP juga bisa dibangun pakai 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('Pelanggaran CSP:', {
      blockedUri: report['blocked-uri'],
      violatedDirective: report['violated-directive'],
      documentUri: report['document-uri'],
    });
  }
  res.status(204).end();
}

Audit Security

Kalau kamu bilang ke Claude Code “mau dapet rating A+ di SecurityHeaders.com”, dia bakal ngidentifikasi header yang kurang dan nyaranin penambahannya.

Summary

Pakai Claude Code, konfigurasi web security headers bisa dilakukan secara akurat dan komprehensif. Baca juga panduan audit security dan panduan konfigurasi CORS untuk referensi.

Untuk detail security headers, lihat MDN Web Docs - HTTP Headers dan SecurityHeaders.com.