Security Headers Penting untuk Next.js

Konfigurasi HTTP security headers adalah salah satu langkah pertahanan paling sederhana / dan paling sering terlewatkan / dalam deployment web modern.

Content Security Policy (CSP)

CSP yang dikonfigurasi dengan benar bisa membuat serangan XSS menjadi tidak berguna. Berikut contoh implementasi di next.config.mjs:

const securityHeaders = [
 {
  key: 'Content-Security-Policy',
  value: "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
 },
 {
  key: 'X-Content-Type-Options',
  value: 'nosniff'
 },
 {
  key: 'X-Frame-Options',
  value: 'DENY'
 },
 {
  key: 'Referrer-Policy',
  value: 'strict-origin-when-cross-origin'
 }
];

export default {
 async headers() {
  return [
   {
    source: '/(.*)',
    headers: securityHeaders,
   },
  ];
 },
};

Headers Wajib Lainnya

Kesalahan Umum

• Menggunakan 'unsafe-inline' di script-src / ini melemahkan CSP. Gunakan nonce atau hash jika memungkinkan.
• Tidak mengetes CSP sebelum production / gunakan Content-Security-Policy-Report-Only dulu.
• Lupa menambahkan header ke semua response / pastikan pattern source mencakup semua rute.