Keamanan website bukan hanya soal menutup pintu dari serangan, tapi juga soal mengatur apa yang boleh dan tidak boleh terjadi di dalam website Anda. Di sinilah peran penting Content Security Policy (CSP) sebuah kebijakan keamanan berbasis browser yang semakin menjadi standar dalam pengamanan aplikasi web modern.
Tanpa CSP, website Anda bisa jadi seperti kota tanpa rambu lalu lintas: semua kendaraan bisa masuk dari mana saja, dan Anda tidak tahu mana yang sah atau berbahaya. Dengan CSP, Anda bisa mengatur “siapa boleh memuat apa” di halaman web Anda. Hasilnya? Perlindungan yang kuat dari berbagai serangan, khususnya Cross-Site Scripting (XSS) dan data injection.
Apa Itu Content Security Policy?
Content Security Policy (CSP) adalah header keamanan HTTP yang memberi tahu browser sumber daya mana yang diperbolehkan untuk dimuat (seperti script, style, image, iframe, dll). Jika ada sesuatu yang melanggar kebijakan ini, browser akan memblokirnya secara otomatis.
Sebagai contoh:
httpCopyEditContent-Security-Policy: default-src 'self'; script-src 'self' https://apis.google.com
Kebijakan di atas menyatakan bahwa semua sumber daya harus berasal dari domain sendiri (self), dan hanya script dari self dan apis.google.com yang boleh dijalankan.
Manfaat Utama CSP
- Mencegah XSS Attack: Script asing tidak bisa dimuat sembarangan.
- Melindungi data pengguna: Mencegah pengambilan data dari sumber tidak sah.
- Menjaga integritas konten: Cegah manipulasi tampilan dan fungsi web dari luar.
- Monitoring dan audit: Dengan fitur report-uri, Anda bisa tahu percobaan pelanggaran keamanan yang terjadi di website Anda.
Langkah-Langkah Mengaktifkan Content Security Policy
Audit Sumber Konten Anda
Langkah pertama adalah mengidentifikasi semua sumber konten di website Anda:
- Dari mana Anda memuat JavaScript, CSS, gambar?
- Apakah Anda menggunakan CDN?
- Apakah ada iframe atau font dari pihak ketiga?
Ini penting karena jika Anda langsung mengaktifkan CSP tanpa daftar lengkap, bisa menyebabkan konten tidak tampil atau fungsi web rusak.
Buat Kebijakan CSP Dasar
Gunakan header dasar seperti berikut:
httpCopyEditContent-Security-Policy: default-src 'self'; script-src 'self'
Ini hanya memperbolehkan konten dari domain Anda sendiri. Anda bisa menyesuaikan bagian script-src, style-src, img-src, font-src, frame-src, dll sesuai kebutuhan.
Gunakan Mode “Report Only” untuk Uji Coba
Untuk mencegah gangguan saat implementasi awal, gunakan mode report-only terlebih dahulu:
httpCopyEditContent-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
Dengan ini, browser akan melaporkan pelanggaran tanpa memblokir konten. Ini memberi Anda waktu untuk memperbaiki konfigurasi sebelum benar-benar menerapkannya.
Aktifkan CSP Secara Penuh
Setelah yakin konfigurasi Anda stabil, ganti ke mode aktif:
httpCopyEditContent-Security-Policy: default-src 'self'; script-src 'self'
Pastikan semua konten penting bisa dimuat dan fungsi website berjalan baik.
Tambahkan Nonce atau Hash untuk Script Inline
Untuk keamanan maksimal, hindari penggunaan unsafe-inline. Jika Anda butuh inline script, gunakan nonce yang berubah setiap request:
htmlCopyEdit<script nonce="abc123">...</script>
Dan di header:
pgsqlCopyEditContent-Security-Policy: script-src 'self' 'nonce-abc123'
Atau gunakan hash:
bashCopyEditscript-src 'sha256-abc...'
Monitor dan Update Secara Berkala
Gunakan laporan pelanggaran CSP sebagai bahan monitoring. Tools seperti Report URI, Google CSP Evaluator, atau Sentry bisa membantu Anda melacak dan memperbaiki potensi celah.
Kesimpulan
Content Security Policy adalah fondasi penting dalam membangun website yang tidak hanya fungsional tapi juga aman dari serangan berbasis browser. Ia menjadi “penjaga gerbang” yang memastikan setiap sumber daya benar-benar berasal dari tempat yang Anda percaya.
Implementasi CSP tidak harus rumit yang penting, dilakukan dengan teliti dan bertahap. Untuk Anda yang ingin membangun website dengan keamanan kelas atas dari awal, Webklik siap membantu dengan solusi pengembangan web yang sudah menerapkan praktik keamanan terbaik, termasuk CSP.