💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

CSP script-src nonce: Panduan Keamanan & Contoh Implementasi

CSP script-src 'nonce-...' adalah mekanisme pengamanan berbasis Content Security Policy yang memungkinkan browser mengeksekusi elemen skrip inline tertentu secara aman dengan mencocokkan string acak (nonce) pada HTTP header dan atribut tag HTML. Metode ini menjadi standar industri untuk menanggulangi kerentanan Cross-Site Scripting (XSS) tanpa harus melonggarkan kebijakan menggunakan 'unsafe-inline'.

Tanpa penggunaan nonce, pengembang terpaksa memasukkan 'unsafe-inline' agar skrip inline dapat berjalan, yang secara drastis membuka celah keamanan bagi penyerang untuk menyuntikkan kode berbahaya. Dengan nonce yang digenerasi secara kriptografis secara dinamis setiap kali halaman dimuat, browser akan mengabaikan skrip apa pun yang tidak memiliki nilai nonce yang cocok dengan header respons server.

Mekanisme Kerja CSP Nonce

Proses validasi keamanan menggunakan nonce melibatkan tiga tahapan utama antara server, HTTP header, dan dokumen HTML yang dikirim ke klien:

Komponen Peran dalam CSP Nonce Keterangan Teknis
Server Backend Menghasilkan token acak Menggunakan fungsi kriptografi aman (misal random_bytes()) untuk setiap request HTTP.
HTTP Header Mengirimkan policy ke browser Menyertakan direktif Content-Security-Policy: script-src 'nonce-{TOKEN}'.
Dokumen HTML Menerapkan atribut pada tag Setiap tag <script> wajib memiliki atribut nonce="{TOKEN}" yang identik.

Contoh Implementasi Kode

Berikut adalah contoh nyata konfigurasi HTTP header di sisi server (menggunakan PHP) beserta penerapan atribut pada dokumen HTML:

<?php
// 1. Generate nonce unik dengan kriptografi yang kuat (minimal 128-bit)
$nonce = base64_encode(random_bytes(16));

// 2. Kirimkan HTTP Header Content-Security-Policy
header("Content-Security-Policy: default-src 'self'; script-src 'nonce-" . $nonce . "'");
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh CSP Nonce<ititle>
</head>
<body>
    <h1>Uji Coba CSP Script-Src Nonce</h1>

    <!-- Skrip ini AKAN DIEKSEKUSI karena nonce cocok dengan header -->
    <script nonce="<?php echo $nonce; ?>">
        console.log("Skrip sah berhasil dijalankan.");
    </script>

    <!-- Skrip ini AKAN DIBLOKIR oleh browser karena tidak memiliki nonce -->
    <script>
        console.log("Skrip berbahaya atau tanpa nonce akan diblokir.");
    </script>
</body>
</html>

Praktik Terbaik dan Troubleshooting Lapangan

Dalam penerapannya di lingkungan produksi berskala besar, terdapat beberapa tantangan teknis yang sering ditemui oleh pengembang web:

  • Inkompatibilitas dengan Web Server Caching: Karena nonce harus bersifat unik (berubah-ubah) pada setiap request HTTP, Anda tidak boleh melakukan cache pada halaman HTML utama secara penuh (full-page caching) tanpa mekanisme Edge Side Includes (ESI) atau pemrosesan dinamis.
  • Pustaka Pihak Ketiga (Third-Party Scripts): Skrip eksternal yang disisipkan melalui tag <script src="..."> juga harus mendukung atribut nonce, atau Anda harus mendaftarkan domain sumbernya secara eksplisit dalam direktif script-src.
  • Peringatan Konsol Browser: Jika skrip diblokir oleh kebijakan CSP, periksa tab Console pada Developer Tools browser Anda. Pesan error spesifik akan mengindikasikan pelanggaran direktif script-src.

🔍 Orang Lain Juga Mencari Ini