Content Security Policy (CSP) adalah lapisan keamanan web yang mendeteksi dan mengurangi risiko serangan jenis Cross-Site Scripting (XSS) serta injeksi data. CSP bekerja dengan membatasi sumber daya—seperti skrip, gaya (stylesheet), gambar, dan media—yang diizinkan untuk dimuat dan dieksekusi oleh browser pada halaman web tertentu.
Mekanisme inti CSP bertumpu pada pengiriman header HTTP Content-Security-Policy atau tag meta HTML dari server ke browser. Header ini berisi serangkaian arahan (directives) yang secara eksplisit mendefinisikan domain atau sumber mana yang tepercaya untuk mengeksekusi kode. Jika browser menemukan skrip atau sumber daya yang berasal dari luar daftar putih (whitelist) yang ditentukan CSP, browser akan otomatis memblokir eksekusinya dan mengirimkan laporan pelanggaran.
Arsitektur dan Direktif Utama CSP
CSP menggunakan berbagai direktif untuk mengontrol jenis aset tertentu. Konfigurasi yang tepat menentukan seberapa ketat kebijakan keamanan diterapkan pada aplikasi web.
| Direktif CSP | Fungsi Utama | Contoh Penggunaan |
|---|---|---|
default-src |
Fallback utama untuk semua direktif yang tidak didefinisikan secara spesifik. | default-src 'self' https://trusted.com |
script-src |
Menentukan sumber eksekusi file JavaScript yang diizinkan. | script-src 'self' https://apis.google.com |
style-src |
Mengontrol sumber stylesheet (CSS) yang boleh dimuat. | style-src 'self' 'unsafe-inline' |
img-src |
Membatasi sumber muatan gambar untuk mencegah pelacakan atau hotlinking. | img-src * data: |
connect-src |
Mengatur target koneksi jaringan via fetch, XHR, WebSocket, atau EventSource. | connect-src 'self' https://api.domain.com |
report-uri / report-to |
Mengirimkan laporan pelanggaran CSP secara otomatis ke endpoint tertentu. | report-uri /csp-violation-endpoint |
Implementasi Teknis Konfigurasi CSP
Penerapan CSP paling optimal dilakukan melalui konfigurasi server web (seperti Nginx atau Apache) atau melalui header HTTP di level aplikasi backend. Berikut adalah contoh implementasi header HTTP untuk mengamankan aplikasi web dari skrip eksternal liar:
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none';Penjelasan sintaks di atas:
default-src 'self': Hanya mengizinkan aset dimuat dari domain asal (origin) yang sama.script-src 'self' https://trusted-cdn.com: JavaScript hanya boleh dieksekusi jika berasal dari domain sendiri atau CDN tepercaya.object-src 'none': Memblokir total elemen plugin seperti Flash, Java applets, atau embed lama yang rentan dieksploitasi.
Penggunaan Nonces dan Hashes untuk Inline Script
Secara default, CSP melarang penggunaan skrip inline (seperti tag <script>...</script> langsung di dalam HTML) guna mencegah XSS. Namun, jika aplikasi membutuhkan skrip inline, pengembang dapat memanfaatkan nonce (number used once) atau hash kriptografi.
<!-- Contoh Implementasi Nonce -->
HTTP Header:
Content-Security-Policy: script-src 'self' 'nonce-rAnDoMvAlUe123'
HTML Code:
<script nonce="rAnDoMvAlUe123">
console.log("Skrip ini diizinkan karena memiliki nonce yang valid.");
</script>Mode Pelaporan (CSP Report-Only)
Sebelum menerapkan kebijakan ketat secara langsung ke produksi (yang berisiko merusak fungsi normal aplikasi web), pengembang wajib menggunakan mode Content-Security-Policy-Report-Only.
Dalam mode ini, browser tidak akan memblokir sumber daya yang melanggar kebijakan, melainkan hanya mengirimkan laporan JSON berisi detail pelanggaran ke URL yang ditentukan pada direktif report-uri. Hal ini memungkinkan audit keamanan secara bertahap tanpa mengganggu pengalaman pengguna akhir.
Troubleshooting dan Tantangan Implementasi Lapangan
Kendala utama dalam penerapan CSP adalah pemblokiran aset sah akibat kebijakan yang terlalu ketat (over-restrictive). Langkah mitigasi di lapangan meliputi:
- Gunakan ekstensi browser atau console Developer Tools untuk memantau error CSP secara real-time.
- Hindari penggunaan
'unsafe-inline'dan'unsafe-eval'pada direktifscript-srckarena akan membuka celah keamanan XSS kembali. - Lakukan pengujian menyeluruh pada staging environment menggunakan mode Report-Only sebelum menerapkannya di live server.