CSP Nonce

TL;DR: CSP Nonce adalah token kriptografis acak satu kali pakai yang dipasang di header Content Security Policy dan diulang sebagai atribut di tag script atau style inline yang sah. Cara ini memungkinkan website tetap menjalankan inline script penting (analytics, tag manager) tanpa membuka celah cross-site scripting (XSS).

Apa itu CSP Nonce?

CSP Nonce, singkatan dari Number used Once, adalah string acak yang di-generate setiap halaman dimuat. Server menaruh nonce ini di dua tempat: di header CSP (Content Security Policy) dan di atribut nonce="..." pada tag inline yang dipercaya. Browser hanya akan menjalankan script atau style yang memiliki nonce cocok.

Analogi sederhana: nonce mirip dengan stempel masuk acara yang berubah setiap tamu datang. Stempel yang sudah dipakai tidak bisa dipakai ulang, dan stempel palsu akan ditolak penjaga pintu (browser).

Cara Pakai CSP Nonce

Implementasi standar di Next.js melibatkan tiga langkah:

Nonce harus berbeda setiap request, tidak boleh di-cache, dan minimum 128 bit entropy menurut dokumentasi MDN.

Kenapa Penting?

Berdasarkan praktik di proyek client, banyak marketer Indonesia menonaktifkan CSP karena Google Tag Manager atau Hotjar tidak jalan. Padahal solusinya bukan mematikan CSP, melainkan memakai nonce. Dengan nonce, script pihak ketiga yang sah tetap jalan, sementara payload XSS yang disuntikkan attacker akan ditolak browser karena tidak punya nonce yang valid.

Untuk website yang menangani form pembayaran, login, atau data sensitif, kombinasi CSP + nonce adalah standar minimum keamanan front-end di 2026.

Pertanyaan Umum

Apakah CSP Nonce bisa di-cache CDN?

Tidak boleh. Halaman dengan nonce harus selalu di-generate ulang per request, atau pakai strategi edge rendering supaya nonce tetap unik.

Apa beda nonce dengan hash?

Nonce dipakai untuk script dinamis dengan nilai per request, sementara hash (sha256) dipakai untuk script statis yang isinya tidak berubah.