Digital Transformation
Content Security Policy (CSP)
TL;DR: Content Security Policy (CSP) adalah header HTTP yang memberi tahu browser sumber mana saja yang boleh memuat script, style, gambar, font, dan koneksi di halaman web Anda. CSP yang ketat memblokir serangan Cross-Site Scripting (XSS) dengan menolak inline script dan domain yang tidak ada di whitelist. Per 2026 CSP Level 3 (dengan nonce dan strict-dynamic) sudah didukung semua browser modern dan menjadi standar untuk situs bisnis serius.
Apa itu Content Security Policy?
Content Security Policy adalah mekanisme keamanan browser yang dideklarasikan via header Content-Security-Policy atau meta tag <meta http-equiv="Content-Security-Policy">. Header ini berisi daftar direktif yang membatasi resource mana yang boleh dimuat dan dieksekusi. Misal script-src 'self' https://cdn.vitoatmo.com artinya browser hanya boleh menjalankan script dari domain Anda sendiri dan CDN yang Anda izinkan. Spesifikasi resmi tersedia di W3C CSP Level 3 dan dokumentasi praktis di web.dev CSP guide.
CSP bekerja sebagai lapisan pertahanan terakhir: kalau penyerang berhasil inject script via form atau komentar yang tidak ter-sanitize, browser tetap menolak menjalankannya karena tidak match CSP. Tanpa CSP, satu lubang XSS bisa mencuri session token, redirect ke phishing, atau menambang crypto di perangkat pengunjung.
Direktif Utama CSP
| Direktif | Fungsi |
|---|---|
default-src | Fallback untuk semua direktif yang tidak diset eksplisit |
script-src | Sumber JavaScript yang boleh dieksekusi |
style-src | Sumber CSS, termasuk inline style |
img-src | Sumber gambar |
connect-src | Endpoint untuk fetch, XHR, WebSocket, EventSource |
frame-src | Sumber iframe yang boleh dimuat |
report-uri | Endpoint untuk laporan pelanggaran CSP |
Praktik modern memakai nonce per request: server generate random nonce, sertakan di header CSP (script-src 'nonce-abc123') dan di setiap <script nonce="abc123">. Ini membuat inline script aman tanpa membuka unsafe-inline.
Kenapa Penting?
Marketer Indonesia sering memasang Google Tag Manager, Meta Pixel, TikTok Pixel, plus 3 sampai 5 widget pihak ketiga (livechat, review, popup). Setiap script adalah pintu serangan. CSP yang strict-dynamic memungkinkan GTM tetap jalan namun memblokir script tidak terdaftar. Bonus: CSP juga mencegah malicious browser extension menginjeksi iklan kompetitor di halaman bisnis Anda. Lihat juga Subresource Integrity untuk verifikasi integritas file CDN.
Pertanyaan Umum
Apakah CSP memperlambat halaman?
Tidak. CSP adalah validasi header yang dilakukan browser secara instan. Yang bisa lambat adalah implementasi salah, misal terlalu banyak report-uri request yang gagal.
Bagaimana mulai pasang CSP tanpa break situs?
Mulai dari mode Content-Security-Policy-Report-Only selama 2 sampai 4 minggu untuk monitor pelanggaran tanpa blocking, lalu pindah ke enforce setelah whitelist lengkap. Lihat tutorial lengkap di artikel implementasi CSP di Next.js.
Istilah Terkait