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

Content Security Policy (CSP) untuk Pencegahan XSS

Content Security Policy (CSP) adalah lapisan keamanan tambahan yang mendeteksi dan mengurangi jenis serangan tertentu, termasuk Cross-Site Scripting (XSS) dan injeksi data. CSP bekerja melalui HTTP response header yang menginstruksikan browser untuk membatasi sumber daya—seperti skrip, gaya, dan gambar—yang diizinkan untuk dimuat dan dieksekusi oleh halaman web.

Serangan XSS memanfaatkan kepercayaan browser pada konten yang diterima dari server. Dengan menerapkan CSP yang ketat, pengembang dapat menonaktifkan eksekusi skrip inline dan memaksa browser hanya memuat skrip dari domain tepercaya, sehingga memblokir payload berbahaya meskipun celah injeksi ada pada aplikasi.

Mekanisme Kerja CSP dalam Memblokir XSS

Secara default, browser mengeksekusi skrip apa pun yang ditemukan dalam dokumen HTML, baik yang disematkan langsung (inline) maupun yang dimuat dari sumber eksternal. Kerentanan XSS terjadi ketika penyerang berhasil menyuntikkan skrip berbahaya yang kemudian dieksekusi oleh browser korban.

CSP memutus rantai eksekusi ini dengan menetapkan kebijakan eksplisit menggunakan direktif keamanan. Tabel di bawah ini merangkum direktif utama CSP yang esensial untuk pertahanan terhadap XSS.

Direktif CSP Fungsi Utama Contoh Penggunaan Aman
default-src Menentukan kebijakan fallback untuk semua jenis sumber daya. default-src 'self';
script-src Membatasi sumber eksekusi skrip (JavaScript). script-src 'self' https://trustedscripts.com;
object-src Mengontrol elemen <object>, <embed>, dan <applet>. object-src 'none';
style-src Membatasi sumber lembar gaya (CSS). style-src 'self' 'unsafe-inline';

Implementasi Header CSP

CSP dikirimkan ke browser melalui header HTTP dari server web. Contoh konfigurasi header HTTP dasar untuk mengamankan aplikasi dari XSS:

Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com; object-src 'none';

Selain melalui header HTTP, CSP juga dapat diimplementasikan menggunakan elemen meta HTML, meskipun beberapa direktif (seperti frame-ancestors, report-uri, dan sandbox) tidak didukung melalui metode ini:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">

Penerapan Nonces dan Hashes untuk Skrip Inline

Aplikasi web sering kali memerlukan penggunaan skrip inline. Untuk mengizinkan skrip inline tertentu tanpa membuka celah XSS, CSP mendukung penggunaan nonce (angka acak kriptografis) atau hash.

Contoh Penggunaan Nonce

Server menghasilkan nilai nonce unik untuk setiap permintaan HTTP dan menambahkannya ke tag skrip serta header CSP:

Content-Security-Policy: script-src 'self' 'nonce-r3d2h9s8u1t4';
<script nonce="r3d2h9s8u1t4">
  // Kode JavaScript yang diizinkan untuk dieksekusi
  console.log("Skrip aman dengan nonce");
</script>

Langkah-Langkah Implementasi dan Troubleshooting

  1. Gunakan Mode Laporan Saja (Report-Only): Sebelum menerapkan kebijakan pemblokiran aktif, gunakan header Content-Security-Policy-Report-Only. Hal ini memungkinkan pemantauan pelanggaran kebijakan tanpa merusak fungsionalitas situs web yang ada.
  2. Tentukan Endpoint Pelaporan: Konfigurasikan direktif report-to atau report-uri untuk menerima laporan JSON dari browser ketika pelanggaran CSP terjadi.
  3. Analisis Log Pelanggaran: Periksa laporan yang masuk untuk mengidentifikasi skrip sah yang mungkin terblokir, lalu sesuaikan kebijakan (misalnya dengan menambahkan domain sumber ke script-src).
  4. Terapkan Kebijakan Aktif: Setelah log bersih dari kesalahan positif, ubah header menjadi Content-Security-Policy standar untuk mulai memblokir skrip tidak sah secara otomatis.

Kesalahan umum saat menerapkan CSP adalah mengandalkan 'unsafe-inline' atau 'unsafe-eval' pada direktif script-src. Penggunaan opsi ini secara signifikan mengurangi efektivitas pertahanan XSS karena mengizinkan eksekusi string sebagai kode JavaScript.

🔍 Orang Lain Juga Mencari Ini