Teknologi

Penggunaan CSP (Content Security Policy) untuk Keamanan

Ingin websitemu kebal dari XSS dan serangan injeksi lainnya? Kenali Content Security Policy (CSP)! Pelajari bagaimana CSP bekerja untuk membatasi sumber daya berbahaya dan cara mengimplementasikannya langkah demi langkah demi keamanan website yang le

Tata Bicara18 Juli 2025

Content Security Policy (CSP) adalah lapisan keamanan tambahan yang membantu mendeteksi dan mengurangi beberapa jenis serangan, termasuk Cross-Site Scripting (XSS) dan serangan injeksi data lainnya. CSP bekerja dengan memberi tahu browser web sumber daya mana (seperti skrip JavaScript, stylesheet CSS, gambar, media, atau font) yang diizinkan untuk dimuat oleh sebuah halaman web. Dengan membatasi sumber-sumber ini, CSP secara signifikan mengurangi risiko eksekusi kode berbahaya yang disuntikkan oleh penyerang.

1. Bagaimana CSP Bekerja?

CSP diimplementasikan melalui header respons HTTP, Content-Security-Policy, atau melalui tag <meta> di dalam HTML. Ketika browser menerima header ini, ia akan memeriksa kebijakan yang ditentukan sebelum memuat setiap sumber daya di halaman.

Misalnya, jika CSP Anda menyatakan bahwa hanya skrip dari domain Anda sendiri yang diizinkan, browser akan menolak memuat skrip apa pun yang berasal dari domain lain, bahkan jika skrip tersebut berhasil disuntikkan ke dalam halaman melalui serangan XSS.

Struktur dasar header CSP adalah serangkaian arahan (directives) yang menentukan sumber daya yang diizinkan untuk berbagai jenis konten. Setiap arahan terdiri dari nama arahan diikuti oleh satu atau lebih sumber yang diizinkan.

Contoh sederhana: Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; img-src 'self' data:;

Dalam contoh ini:

  • default-src 'self' : Secara default, hanya sumber daya dari domain yang sama (self) yang diizinkan.

  • script-src 'self' https://trusted.cdn.com : Hanya skrip dari domain sendiri atau dari https://trusted.cdn.com yang diizinkan.

  • img-src 'self' data: : Hanya gambar dari domain sendiri atau gambar yang disematkan sebagai URI data (misalnya, data:image/png;base64,...) yang diizinkan.

2. Manfaat Utama Penggunaan CSP

Penggunaan CSP memberikan beberapa manfaat signifikan untuk keamanan website:

  • Mitigasi Serangan XSS: Ini adalah manfaat paling utama. CSP secara efektif memblokir eksekusi skrip berbahaya yang disuntikkan ke dalam halaman, bahkan jika penyerang berhasil melewati validasi input.

  • Mencegah Serangan Injeksi Data Lain: Selain XSS, CSP juga dapat membantu mencegah serangan injeksi lainnya yang mencoba memuat resource eksternal yang tidak sah, seperti malware atau iframe jahat.

  • Mengurangi Risiko Clickjacking: Dengan arahan frame-ancestors, CSP dapat mengontrol apakah halaman Anda dapat di-embed dalam iframe atau frame dari domain lain, sehingga mencegah serangan clickjacking.

  • Meningkatkan Kepercayaan: Pengguna dan browser akan merasa lebih aman saat berinteraksi dengan website yang memiliki CSP yang diterapkan dengan baik.

  • Mode Pelaporan (Report-Only Mode): CSP dapat diatur ke mode Content-Security-Policy-Report-Only. Dalam mode ini, kebijakan tidak akan memblokir konten apa pun, tetapi browser akan melaporkan setiap pelanggaran ke URI yang ditentukan. Ini sangat berguna untuk menguji dan menyempurnakan kebijakan CSP tanpa merusak fungsionalitas website yang ada.

3. Direktif CSP yang Umum Digunakan

Berikut adalah beberapa arahan (directives) CSP yang paling sering digunakan:

  • default-src: Arahan fallback untuk semua jenis sumber daya yang tidak memiliki arahan spesifik sendiri.

  • script-src: Mengontrol sumber yang diizinkan untuk skrip JavaScript.

  • style-src: Mengontrol sumber untuk stylesheet CSS.

  • img-src: Mengontrol sumber untuk gambar.

  • connect-src: Mengontrol URL yang dapat dimuat menggunakan interface permintaan (misalnya, Fetch, XMLHttpRequest, WebSockets).

  • font-src: Mengontrol sumber untuk font web.

  • frame-src: Mengontrol sumber yang diizinkan untuk iframe dan frame lainnya.

  • frame-ancestors: Mengontrol apakah halaman dapat di-embed dalam frame dari asal lain (untuk mencegah clickjacking).

  • object-src: Mengontrol sumber untuk objek seperti Flash atau Java applet.

  • media-src: Mengontrol sumber untuk audio dan video.

  • form-action: Mengontrol URL tempat formulir dapat mengirimkan data.

  • upgrade-insecure-requests: Mengarahkan browser untuk mengubah permintaan HTTP yang tidak aman menjadi HTTPS.

  • report-uri (deprecated, gunakan report-to): Menentukan URI tempat browser harus mengirimkan laporan pelanggaran kebijakan.

Nilai Sumber Umum:

  • 'self': Mengizinkan sumber dari domain yang sama dengan dokumen.

  • 'unsafe-inline': Mengizinkan skrip atau gaya inline (tidak direkomendasikan karena rentan XSS).

  • 'unsafe-eval': Mengizinkan penggunaan eval() dan fungsi serupa untuk mengeksekusi string sebagai kode (tidak direkomendasikan).

  • data:: Mengizinkan URI data (misalnya, gambar base64).

  • nonce-source atau hash-source: Mengizinkan skrip/gaya inline tertentu dengan nonce kriptografi unik atau hash dari kontennya (pendekatan yang lebih aman untuk inline script).

  • Nama domain: https://cdn.example.com, *.example.com.

4. Cara Mengimplementasikan CSP

Implementasi CSP harus dilakukan dengan hati-hati untuk menghindari pemblokiran resource yang sah dan merusak fungsionalitas website.

Langkah 1: Perencanaan dan Audit Awal

  • Identifikasi Semua Sumber Daya: Buat daftar lengkap semua sumber daya eksternal dan internal yang digunakan oleh website Anda (CDN, library pihak ketiga, analitik, font, gambar, dll.).

  • Analisis Penggunaan Inline: Periksa apakah ada skrip atau gaya inline yang digunakan dalam HTML Anda. Jika ada, Anda perlu mempertimbangkan cara mengatasinya (migrasi ke file eksternal, atau menggunakan nonce/hash).

  • Mulai dengan Mode Report-Only: Ini adalah langkah paling penting. Terapkan kebijakan CSP Anda di header Content-Security-Policy-Report-Only.

    Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' https://cdn.example.com; ...; report-uri /csp-report-endpoint;
    

    Ganti /csp-report-endpoint dengan URL di server Anda yang akan menerima laporan JSON ketika ada pelanggaran CSP. Anda bisa membangun endpoint sendiri atau menggunakan layanan pihak ketiga seperti Report URI.

Langkah 2: Uji dan Sempurnakan Kebijakan

  • Pantau Laporan Pelanggaran: Setelah menerapkan CSP dalam mode Report-Only, akses website Anda secara ekstensif. Gunakan browser yang berbeda dan simulasikan berbagai skenario penggunaan. Periksa laporan pelanggaran yang diterima di endpoint report-uri Anda.

  • Analisis Laporan: Setiap laporan akan menunjukkan sumber daya apa yang diblokir (atau akan diblokir) dan dari mana asalnya. Gunakan informasi ini untuk menyesuaikan kebijakan Anda, menambahkan sumber daya yang sah ke dalam whitelist.

  • Iterasi: Ulangi proses ini sampai Anda yakin bahwa kebijakan Anda tidak memblokir fungsionalitas yang sah dan hanya memblokir potensi ancaman. Proses ini mungkin memerlukan waktu beberapa hari hingga minggu, tergantung kompleksitas website.

Langkah 3: Terapkan Kebijakan dalam Mode Penegakan

  • Setelah Anda yakin dengan kebijakan CSP Anda, ganti header Content-Security-Policy-Report-Only menjadi Content-Security-Policy.

    Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; ...;
    

    Sekarang, browser akan secara aktif memblokir sumber daya yang melanggar kebijakan Anda.

Langkah 4: Pemeliharaan Berkelanjutan

  • Perbarui Kebijakan: Setiap kali Anda menambahkan script baru, CDN baru, atau resource eksternal lainnya ke website, pastikan untuk memperbarui kebijakan CSP Anda agar mengizinkan resource tersebut.

  • Pantau Laporan Pelanggaran (Opsional, Lanjutkan): Anda masih bisa menggunakan report-uri atau report-to bahkan dalam mode penegakan untuk terus memantau pelanggaran dan mendeteksi perubahan atau upaya serangan baru.

5. Tips Penting dalam Implementasi CSP

  • Hindari 'unsafe-inline' dan 'unsafe-eval': Ini adalah arahan yang sangat tidak aman dan seringkali mengalahkan tujuan CSP. Jika Anda harus menggunakan inline script atau eval(), pertimbangkan untuk menggunakan nonce (Nomor yang digunakan sekali) kriptografi atau hash konten skrip Anda.

  • *Gunakan Nonce atau Hash untuk Inline Script/Style: Ini adalah cara yang lebih aman untuk mengizinkan skrip atau gaya inline tertentu. Anda menghasilkan nonce unik setiap kali halaman dimuat dan menyertakannya di tag skrip (<script nonce="random_string_here">) dan di kebijakan CSP (script-src 'nonce-random_string_here').

  • Spesifik Mungkin: Cobalah untuk menjadi sespesifik mungkin dengan sumber daya Anda. Daripada *, tentukan domain yang tepat.

  • Jangan Andalkan CSP sebagai Satu-satunya Pertahanan: CSP adalah lapisan keamanan yang kuat, tetapi bukan pengganti untuk validasi input yang tepat, sanitasi output, patch keamanan yang teratur, dan praktik coding yang aman. Ini adalah bagian dari strategi defense-in-depth.

Dengan implementasi yang cermat, CSP dapat menjadi alat yang sangat efektif dalam memperkuat pertahanan keamanan website Anda terhadap ancaman siber yang terus berkembang.

Share:

0 Komentar