Content Security Policy (CSP)

CSP adalah header HTTP yang menentukan sumber mana yang boleh memuat script, style, gambar, font, dan koneksi. Header ini tidak menutup celah XSS, tapi membatasi apa yang bisa dilakukan kode yang berhasil disisipkan. Kalau penyerang menambahkan tag script, browser menolak menjalankannya dari domain yang tidak diizinkan.

Direktif yang sering dipakai

default-src menjadi cadangan untuk semua resource. script-src mengatur JavaScript, termasuk script inline dan worker. style-src mengatur CSS. img-src mengatur gambar. connect-src mengatur fetch, XHR, WebSocket, dan beacon. frame-ancestors mencegah halaman di-embed di situs lain, sedangkan form-action membatasi tujuan form.

Nilai 'self' berarti origin yang sama. Nonce dan hash mengizinkan script tertentu tanpa membuka semua script inline. Hindari 'unsafe-inline' di script-src karena nilainya membuat proteksi XSS jauh lebih lemah.

Contoh header dari aplikasi

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://cdn.contoh.com; connect-src 'self' https://api.contoh.com; frame-ancestors 'self'; base-uri 'self'; form-action 'self'

Nonce di header harus sama dengan nonce yang dirender aplikasi di tag script. Aplikasi membuat nonce acak untuk setiap request, memakai nilai itu di HTML, lalu mengirim header yang sama. Jangan membuat nonce terpisah di Nginx karena nilainya tidak akan cocok dengan HTML.

Mulai dari report-only

Jangan langsung mengaktifkan policy penuh. Pakai Content-Security-Policy-Report-Only lebih dulu. Browser akan melaporkan pelanggaran tanpa memblokir resource. Buka DevTools Console, cari pesan “Refused to load”, lalu perbaiki widget chat, analytics, font, dan iframe pembayaran yang belum diizinkan.

Setelah daftar pelanggaran bersih, terapkan satu direktif pada satu waktu. Uji login, checkout, dan form sebelum menaikkan policy. Kirim laporan ke endpoint sendiri dengan report-to atau report-uri, dan batasi ukuran log supaya tidak membanjiri server.

Yang bikin CSP gagal

Policy yang disalin dari situs lain sering memblokir aset penting. Membuka unsafe-inline karena malas juga melemahkan proteksi. Lupa frame-ancestors membuat halaman masih bisa di-embed. Dan CSP tidak menggantikan validasi input atau escaping output.

CSP melengkapi HSTS yang mengamankan transport dan WAF yang memfilter request di server. Ketiganya bekerja di lapisan berbeda.

Kalau aplikasi memuat resource dari origin lain, atur juga CORS.

FAQ