Digital Transformation
CSP (Content Security Policy)
TL;DR: Content Security Policy (CSP) adalah header HTTP yang mendefinisikan whitelist sumber konten yang boleh dimuat browser di sebuah halaman, mulai dari skrip sampai font. Header ini menjadi lapisan pertahanan utama terhadap Cross-Site Scripting (XSS) dan data injection di web modern.
Apa itu CSP?
CSP berupa satu baris header Content-Security-Policy yang dikirim server bersama respons HTML. Isinya daftar directive seperti script-src, img-src, connect-src, masing-masing diikuti sumber yang diizinkan (domain, 'self', 'nonce-...', atau hash). Browser akan memblokir resource di luar daftar dan, jika report-uri atau report-to dipasang, mengirim laporan pelanggaran ke endpoint Anda.
Untuk konteks pemula, CSP mirip daftar tamu di pintu masuk. Tanpa daftar, siapa pun yang menyusupkan skrip lewat form atau komentar bisa berjalan di domain Anda. Dengan CSP, browser hanya mempercayai sumber yang Anda izinkan.
Cara Kerja Singkat
- Server menambahkan header CSP di setiap respons HTML.
- Browser membaca header sebelum parsing halaman.
- Setiap permintaan resource (gambar, skrip, fetch) dicocokkan ke directive yang relevan.
- Resource yang melanggar diblokir dan dapat dilaporkan otomatis.
| Directive | Mengatur | Contoh |
|---|---|---|
default-src | Fallback semua resource | 'self' |
script-src | Sumber skrip | 'self' 'nonce-abc123' |
img-src | Sumber gambar | 'self' data: https://images.unsplash.com |
connect-src | Endpoint fetch/XHR/WS | 'self' https://api.vitoatmo.com |
frame-ancestors | Siapa boleh embed via iframe | 'none' |
Kenapa Penting?
CSP menutup celah XSS yang lolos dari sanitasi input, sekaligus membatasi dampak compromise pihak ketiga (misalnya skrip analytics yang disusupi). Untuk personal brand dan website bisnis Indonesia yang sering memakai widget pihak ketiga, CSP mencegah satu skrip nakal mencuri sesi pengunjung atau memodifikasi konten. Praktik standar Google Search Central juga memasukkan CSP sebagai sinyal trust untuk E-E-A-T.
Pertanyaan Umum
Apakah CSP memengaruhi performa?
Tidak signifikan. Header tambahan sekitar 200 sampai 800 byte. Yang berdampak justru salah konfigurasi yang memblokir resource kritis dan menambah waktu retry.
Bagaimana cara mulai tanpa merusak situs?
Pasang dulu mode Content-Security-Policy-Report-Only selama 1 sampai 2 minggu. Browser tetap memuat semua resource, tetapi mengirim laporan pelanggaran ke endpoint Anda. Setelah daftar pelanggaran stabil, baru aktifkan mode enforcement.
Istilah Terkait