
Lapisan Terakhir Pertahanan Browser
Kita telah membahas bahayanya serangan XSS (Cross-Site Scripting), di mana *hacker* berhasil menyisipkan tag ke dalam database atau URL website-mu. Sekuat apapun kamu mencegah (*Sanitize*), kelemahan manusia (Human Error) bisa saja melewatkan satu celah.
Bagaimana cara menjamin keamanan 100% secara sistematis? Jawabannya ada pada Content Security Policy (CSP).
Apa Itu CSP? (Sistem Whitelist Otomatis)
CSP adalah sebuah HTTP Header (pengaturan tersembunyi yang dikirim dari Backend ke Browser), atau sebuah Meta Tag di HTML. CSP bertindak sebagai "Daftar Tamu Resmi" (Whitelist).
Melalui CSP, kamu menginstruksikan Browser secara tegas: "Hai Chrome, di website saya ini, kamu HANYA BOLEH menjalankan kode JavaScript yang berasal dari nama Domain saya sendiri. Jika ada script yang memanggil dari domain aneh-aneh (seperti hacker.com), BLOKIR DAN MATIKAN!"
Melihat Kekuatan CSP Beraksi
Misalkan Backend Node.js-mu mengirimkan *Header* keamanan ini:
Content-Security-Policy: default-src 'self'; img-src *; script-src 'self' https://trusted-analytics.com;Cara Membaca Aturan Polisi CSP di atas:
default-src 'self': Secara umum, semua aset (CSS/Iframe/Video) hanya boleh di-load jika asalnya dari nama domain yang sama dengan web ini (Self).img-src *: Pengecualian, khusus untuk Gambar, izinkan memuat dari semua URL di dunia (tanda Bintang).script-src 'self' https://trusted-analytics.com: Ini senjata utamanya! Hanya file JavaScript dari domain sendiri dan dari trusted-analytics.com (misal: Google Analytics) yang boleh tereksekusi.
Hacker Langsung Menangis
Sekarang, asumsikan *hacker* berhasil membobol kolom komentar-mu dan memasukkan ke dalam HTML.
Saat Chrome merender halaman tersebut, ia melihat tag jahat itu, lalu mencocokkannya dengan kertas CSP: "Hacker.com? Merek ini tidak ada di daftar tamu resmi saya!". Chrome akan memunculkan Error Merah di Console (Refused to load the script because it violates the CSP directive) dan skrip perampok itu Gagal Berjalan 100%. Gembok keamananmu tidak bisa ditembus!
Catatan Penerapan
Bagi developer, menerapkan CSP secara ketat sangat menantang karena fitur lama seperti menulis JavaScript langsung di dalam elemen (Inline Scripts seperti onclick="alert('hello')") akan ikut diblokir secara default. Namun, di dunia modern (React/Vue), kita memang sudah sangat menghindari praktik Inline JS, sehingga CSP sangat mudah diadopsi untuk aplikasi web masa kini.
Mau langsung pakai template?
Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.
Browse Templates