Content Security Policy (CSP) menyediakan dua mekanisme berbasis kriptografi untuk mengizinkan eksekusi skrip inline yang aman: nonce (number used once) dan hash. Perbedaan utamanya terletak pada cara implementasinya: nonce menghasilkan token unik acak yang harus diregenerasi pada setiap respons HTTP dan dicantumkan pada tag skrip, sedangkan hash menghitung nilai kriptografi dari isi (konten) skrip itu sendiri sehingga nilai tersebut dapat di-cache secara permanen selama isi skrip tidak berubah.
Pemilihan antara nonce dan hash bergantung pada arsitektur server aplikasi Anda. Jika aplikasi Anda menggunakan server-side rendering (SSR) yang dinamis dan menghasilkan halaman baru pada setiap permintaan (request), nonce adalah pilihan terbaik. Sebaliknya, jika aplikasi Anda menyajikan halaman statis atau menggunakan sistem caching yang agresif di mana tag skrip bersifat konstan, hash jauh lebih efisien karena menghindari pembangkitan token acak per request.
Matriks Perbandingan Nonce vs Hash CSP
| Parameter | CSP Nonce | CSP Hash |
|---|---|---|
| Definisi | Nilai acak unik per HTTP request. | Nilai kriptografi (SHA-256/384/512) dari isi skrip. |
| Kompatibilitas Caching | Buruk (Halaman tidak bisa di-cache secara agresif karena nonce berubah terus). | Sangat baik (Halaman dapat di-cache secara permanen selama skrip tidak berubah). |
| Kompleksitas Implementasi | Membutuhkan middleware server untuk menghasilkan nonce baru setiap request. | Membutuhkan proses build/deployment untuk menghitung hash dari setiap skrip inline. |
| Risiko Keamanan | Rentan jika nonce mudah ditebak (harus minimal 128-bit entropy) atau terjadi kebocoran DOM. | Aman dari manipulasi DOM, namun jika isi skrip berubah, hash harus diperbarui. |
| Contoh Penggunaan | Aplikasi dinamis (PHP, Node.js SSR, Django). | Situs statis, SPA dengan skrip inline tetap, atau lingkungan CDN ketat. |
Cara Kerja dan Implementasi CSP Nonce
Nonce bekerja dengan menyisipkan atribut acak ke dalam tag <script> dan mendeklarasikannya di dalam header HTTP CSP. Browser hanya akan mengeksekusi skrip jika atribut nonce pada tag cocok persis dengan nilai yang ada di header CSP.
Content-Security-Policy: script-src 'nonce-r3d0mSueR4nd0m' 'strict-dynamic';
<script nonce="r3d0mSueR4nd0m">
console.log("Skrip ini aman dan dieksekusi.");
</script>Karena nilai r3d0mSueR4nd0m harus unik untuk setiap pemuatan halaman, server web harus menghasilkan nilai baru menggunakan generator angka acak yang aman secara kriptografi (CSPRNG) pada setiap siklus permintaan.
Cara Kerja dan Implementasi CSP Hash
Hash tidak membutuhkan token acak yang berubah-ubah. Sebaliknya, hash mengambil konten teks dari elemen <script>, menghitung nilai digest-nya (biasanya menggunakan SHA-256), dan mencantumkannya pada header CSP.
Content-Security-Policy: script-src 'sha256-B2V7...xyz=';
<script>
console.log("Isi skrip ini dilindungi oleh hash.");
</script>Setiap kali ada spasi, karakter, atau baris baru yang diubah di dalam tag skrip, nilai hash akan berubah total dan browser akan memblokir eksekusinya. Hal ini membuat pendekatan hash sangat cocok untuk skrip statis yang jarang atau tidak pernah berubah.
Kelebihan dan Kekurangan di Lapangan
Dalam penerapan nyata, administrator sistem sering menghadapi dilema antara performa caching dan kemudahan pemeliharaan kode:
- Nonce: Mempermudah jika tim sering memperbarui kode JavaScript inline tanpa perlu mengubah konfigurasi CSP di server. Namun, hal ini menonaktifkan mekanisme page caching berbasis proxy/CDN karena header CSP dan isi HTML bersifat unik per pengguna.
- Hash: Mendukung performa optimal karena halaman HTML dapat disimpan di CDN (Edge caching). Tantangannya terletak pada automation pipeline (CI/CD) yang harus menghitung ulang hash setiap kali file sumber mengalami modifikasi.
Rekomendasi Penggunaan
Gunakan Nonce jika aplikasi Anda adalah aplikasi web monolitik atau SSR dinamis yang sangat bergantung pada data real-time per pengguna dan tidak mengandalkan cache halaman penuh. Gunakan Hash jika Anda membangun aplikasi berkinerja tinggi dengan CDN, arsitektur Jamstack, atau halaman statis yang membutuhkan perlindungan XSS ketat tanpa mengorbankan kecepatan pengiriman aset.