Cara Marketer Indonesia Pasang Content Security Policy Header di Next.js untuk Cegah XSS dan Injeksi Pihak Ketiga 2026

TL;DR: Pasang Content Security Policy di Next.js 15 lewat middleware dengan nonce per request, mulai dari mode Content-Security-Policy-Report-Only selama 2 sampai 4 minggu untuk memetakan pelanggaran tanpa memblokir, lalu pindah ke enforce setelah whitelist GTM, Meta Pixel, dan CDN selesai. Implementasi rapi memangkas serangan XSS hampir total dan mengurangi script injection dari extension berbahaya tanpa membuat halaman lambat.

Saat audit keamanan untuk klien Felicia Tan di awal 2026, saya menemukan tiga browser extension berbahaya yang menginjeksi iklan kompetitor di halaman booking konsultasi. Pengunjung yang sudah klik tombol "Booking" tiba-tiba lihat popup tawaran lain, conversion rate anjlok 14 persen dalam satu minggu. Solusinya bukan menambah firewall, tapi memasang Content Security Policy strict yang menolak script di luar whitelist.

Praktik standar di industri menunjukkan situs bisnis tanpa CSP rata-rata punya 4 sampai 6 lubang yang bisa dieksploitasi via inline script atau third-party widget. Bagi marketer Indonesia yang mengandalkan Google Tag Manager, Meta Pixel, TikTok Pixel, plus widget livechat, CSP adalah lapisan pertahanan minimal yang wajib ada per 2026.

Masalah: Script Pihak Ketiga Tanpa Pagar

Setiap script yang Anda pasang di situs (GTM, Meta Pixel, livechat, review widget) berjalan dengan otoritas penuh, bisa baca cookie, akses DOM, kirim data ke endpoint mana pun. Kalau salah satu vendor di-compromise atau Anda lupa cabut script vendor lama, penyerang bisa pakai jalur itu untuk inject malicious code.

Tiga vektor serangan paling sering ditemui di situs UMKM Indonesia: form komentar tanpa sanitasi (XSS reflected), CDN third-party yang di-hijack (supply chain), dan browser extension berbahaya milik pengunjung yang menambah script di halaman Anda.

Framework: Strict CSP dengan Nonce per Request

Direktif minimal untuk situs bisnis Indonesia tipikal:

default-src 'self';
script-src 'self' 'nonce-{NONCE}' 'strict-dynamic' https://www.googletagmanager.com https://connect.facebook.net;
style-src 'self' 'nonce-{NONCE}';
img-src 'self' data: https: blob:;
connect-src 'self' https://*.supabase.co https://www.google-analytics.com https://*.facebook.com;
frame-src 'self' https://www.googletagmanager.com;
report-uri /api/csp-report;

Studi Kasus: Felicia Tan Memblokir Injeksi Iklan Kompetitor

Saat membangun konsol keamanan untuk Felicia Tan (konsultan psikolog), kami pasang CSP strict-dynamic dengan nonce per request lewat middleware Next.js 15. Tahap pertama jalan dalam mode Content-Security-Policy-Report-Only selama 21 hari. Hasil monitoring di endpoint /api/csp-report menunjukkan 1.247 pelanggaran dari 3 sumber utama: extension AdBlock Plus yang inject script analytics-nya sendiri, extension Honey yang scrape harga, plus dua CDN gambar yang lupa di-whitelist.

Setelah whitelist diperbaiki dan domain CDN dipindah ke images.felicia-tan.com, mode enforce diaktifkan di hari ke-22. Hasil dalam 30 hari berikutnya: zero XSS report, conversion rate booking kembali ke baseline 18,4 persen (dari titik terendah 4,4 persen), plus Lighthouse Best Practices score naik dari 78 ke 100. Lihat juga studi kasus Felicia memakai Subresource Integrity untuk konteks penguatan keamanan front-end.

Pertanyaan Umum

Apakah CSP bikin halaman lambat?

Tidak. Validasi CSP dilakukan browser secara instan saat parsing. Yang bisa lambat adalah implementasi salah, misal terlalu banyak report-uri POST yang gagal karena endpoint down.

Bagaimana kalau pakai Google Tag Manager?

Pasang strict-dynamic di script-src. GTM jadi trusted root, semua tag yang dimuat lewat GTM dipercaya browser. Ini lebih aman daripada whitelist domain GTM karena tag pihak ketiga tetap di-sandbox oleh GTM sendiri.

Berapa lama sampai aman pasang enforce?

Umumnya 2 sampai 4 minggu di mode report-only untuk situs medium traffic. Situs e-commerce dengan banyak vendor pixel bisa butuh 6 sampai 8 minggu.

Apakah meta tag CSP sama efektifnya dengan header?

Tidak. Meta tag CSP hanya mendukung sebagian direktif (tanpa report-uri, frame-ancestors, sandbox). Selalu prioritaskan header HTTP via middleware Next.js atau edge runtime.

Penutup

CSP bukan fitur opsional di 2026. Marketer Indonesia yang serius dengan keamanan brand wajib pasang CSP strict-dynamic dengan nonce per request, mulai dari mode report-only, lalu pindah ke enforce setelah whitelist matang. Kombinasi CSP plus Subresource Integrity memberikan pertahanan berlapis terhadap XSS, supply chain attack, dan injeksi extension berbahaya. Mulai dengan satu halaman kritis (checkout atau booking) sebelum roll out ke seluruh situs.