Konten dinamis sering berasal dari input pengguna, hasil API, atau data yang disimpan di basis data. Jika teks tersebut dimasukkan ke halaman tanpa penanganan yang tepat, markup berbahaya dapat berubah menjadi elemen aktif dan membuka peluang serangan cross-site scripting (XSS). Sanitasi di sisi browser membantu membatasi HTML yang boleh dimasukkan ke DOM. Sanitizer API menyediakan antarmuka bawaan untuk memproses HTML berdasarkan kebijakan yang ditentukan, tetapi tetap perlu digunakan sesuai konteks.
Apa itu Sanitizer API?
Sanitizer API adalah antarmuka platform web yang dirancang untuk membantu pengembang membersihkan markup HTML sebelum menampilkannya sebagai konten. Alih-alih mengandalkan rangkaian ekspresi reguler untuk menghapus tag, pengembang dapat menggunakan metode sanitasi yang memahami struktur dokumen. Dukungan browser dan ketersediaan metode dapat berbeda, sehingga aplikasi perlu memeriksa kemampuan yang tersedia dan menyiapkan pendekatan cadangan.
Sanitasi bukan hal yang sama dengan escaping. Escaping mengubah karakter agar ditampilkan sebagai teks, sedangkan sanitasi mempertahankan bagian markup yang diizinkan sambil menghapus atau membatasi bagian berisiko. Pilih pendekatan berdasarkan tujuan: jika yang dibutuhkan hanya teks biasa, lebih aman menggunakan text content daripada memasukkan HTML.
Mengapa HTML dinamis berisiko?
Properti seperti innerHTML menafsirkan string sebagai markup. Jika data tidak tepercaya mengandung elemen, atribut, atau URL berbahaya, browser dapat memprosesnya dengan cara yang tidak diinginkan. Dampak XSS dapat mencakup tindakan atas nama pengguna yang sedang masuk, pengubahan tampilan, atau pengambilan data yang dapat diakses halaman.
Risiko tidak terbatas pada tag script. Atribut event, URL dengan skema berbahaya, elemen SVG tertentu, dan kombinasi markup lain dapat menjadi masalah. Menghapus satu kata atau pola yang tampak mencurigakan bukan pertahanan yang dapat diandalkan karena HTML memiliki aturan parsing yang kompleks.
Gunakan sanitasi sesuai kebutuhan
Jika aplikasi hanya perlu menampilkan nama, komentar sebagai teks, atau nilai formulir, masukkan nilai melalui textContent. Cara ini menghindari penafsiran input sebagai HTML. Jika aplikasi memang perlu mendukung format seperti paragraf, tautan, atau daftar, sanitasi markup menggunakan kebijakan yang membatasi elemen dan atribut yang diizinkan.
Contoh konseptual berikut menunjukkan pemeriksaan dukungan API sebelum digunakan. Sintaks dan metode yang tersedia harus diverifikasi pada browser target sesuai dokumentasi platform terbaru.
const target = document.querySelector("#konten");
const input = dataDariSumberTidakTepercaya;
if ("Sanitizer" in window && "setHTML" in Element.prototype) {
target.setHTML(input);
} else {
// Jika hanya perlu teks, jangan menafsirkan input sebagai HTML.
target.textContent = input;
}Contoh ini merupakan pola dasar, bukan pengganti pengujian kompatibilitas. Jika aplikasi harus mempertahankan format HTML pada browser yang belum mendukung API, gunakan pustaka sanitasi yang dipelihara dan konfigurasi kebijakan yang setara. Jangan beralih ke innerHTML tanpa sanitasi hanya karena API bawaan tidak tersedia.
Tentukan kebijakan yang ketat
- Izinkan seperlunya. Tentukan tag dan atribut yang benar-benar dibutuhkan. Kebijakan yang sempit lebih mudah ditinjau daripada daftar izin yang terlalu luas.
- Batasi URL. Tautan perlu dibatasi pada skema yang sesuai, seperti HTTPS, dan atribut yang membuka tab baru perlu ditangani dengan aman.
- Jangan mempercayai input karena berasal dari database. Data yang tersimpan mungkin awalnya berasal dari pengguna atau layanan eksternal.
- Sanitasi pada batas tampilan. Pilih metode berdasarkan konteks penggunaan. HTML, atribut, URL, CSS, dan JavaScript memiliki aturan keamanan yang berbeda.
- Uji markup berbahaya. Sertakan atribut event, URL tidak lazim, SVG, markup bersarang, dan input yang sengaja dibuat rusak dalam pengujian.
Sanitasi bukan satu-satunya lapisan keamanan
Gunakan Content Security Policy (CSP) sebagai lapisan pertahanan tambahan, bukan sebagai alasan untuk membiarkan HTML tidak tepercaya masuk ke DOM. Hindari skrip inline yang tidak diperlukan, gunakan nonce atau hash bila sesuai, dan periksa laporan pelanggaran CSP. Validasi input di server juga tetap penting untuk aturan bisnis, tetapi validasi saja tidak menggantikan sanitasi output di browser.
Jika aplikasi menggunakan framework, manfaatkan mekanisme escaping bawaan dan hindari fitur yang sengaja melewati perlindungan tersebut kecuali ada alasan kuat. Audit semua tempat yang memasukkan string ke DOM, termasuk widget, pratinjau Markdown, hasil pencarian, dan konten dari API.
Kesimpulan
Sanitizer API dapat membantu mengurangi risiko XSS ketika aplikasi perlu menampilkan HTML dinamis, tetapi pengembang tetap harus memilih kebijakan yang ketat dan memastikan kompatibilitas browser. Untuk data yang hanya perlu dibaca, gunakan textContent. Untuk HTML berformat, gunakan sanitasi yang teruji, uji kasus berbahaya, dan kombinasikan dengan praktik keamanan lain. Jangan menganggap API atau pustaka apa pun otomatis membuat semua konten tepercaya.