Fungsi HTML escape di JavaScript digunakan untuk mengubah karakter khusus seperti <, >, &, ", dan ' menjadi entitas HTML amannya masing-masing. Hal ini wajib dilakukan sebelum merender input yang berasal dari pengguna ke dalam DOM untuk mencegah serangan Cross-Site Scripting (XSS).
Cara paling aman dan efisien di lingkungan modern tanpa pustaka eksternal adalah memanfaatkan objek DOM bawaan peramban (browser) melalui elemen textarea atau menggunakan metode penggantian string reguler ekspresi (RegEx).
Implementasi Fungsi HTML Escape di JavaScript
Berikut adalah dua pendekatan utama untuk melakukan HTML escaping menggunakan JavaScript murni (Vanilla JS) yang siap pakai di produksi.
1. Pendekatan Menggunakan DOM (Recommended untuk Browser)
Pendekatan ini memanfaatkan fungsi bawaan peramban untuk melakukan encoding secara otomatis tanpa risiko terlewatnya karakter khusus.
function escapeHTML(str) {
const text = document.createElement('div');
text.innerText = str;
return text.innerHTML;
}2. Pendekatan Menggunakan Regular Expression (Universal / Node.js)
Jika Anda bekerja di lingkungan non-browser seperti Node.js atau membutuhkan performa tinggi tanpa manipulasi DOM, gunakan pemetaan karakter manual dengan RegEx.
function escapeRegEx(str) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return str.replace(/[&<>"']/g, function(m) { return map[m]; });
}Tabel Pemetaan Karakter HTML Escape
Tabel berikut merinci karakter khusus yang wajib dikonversi beserta hasil entitas HTML-nya untuk mencegah eksekusi skrip berbahaya.
| Karakter Asli | Entitas HTML | Deskripsi Fungsi Keamanan |
|---|---|---|
& | & | Mencegah ambiguitas penafsiran entitas HTML. |
< | < | Mencegah pembukaan tag HTML baru (misal: <script>). |
> | > | Mencegah penutupan tag HTML yang tidak diinginkan. |
" | " | Mengamankan nilai atribut elemen HTML berpemanis ganda. |
' / ' | ' | Mengamankan nilai atribut elemen HTML berpemanis tunggal. |
Langkah-Langkah Implementasi dan Validasi
Ikuti langkah teknis berikut untuk menerapkan fungsi escape pada aplikasi web Anda:
- Tentukan fungsi escape yang sesuai dengan lingkungan kerja Anda (DOM untuk sisi klien, RegEx untuk sisi server/Node.js).
- Simpan fungsi tersebut di dalam berkas utilitas terpisah, misalnya
security.js. - Panggil fungsi escape setiap kali Anda ingin memasukkan data dinamis ke dalam elemen HTML melalui properti seperti
innerHTML. - Lakukan pengujian unit dengan memasukkan string uji coba seperti
<script>alert('XSS')</script>untuk memastikan skrip tidak tereksekusi.
Tips Troubleshooting Lapangan
Masalah yang sering terjadi adalah penggunaan properti innerHTML secara langsung tanpa sanitasi saat menerima data dari API eksternal. Selalu pastikan data teks murni dirender menggunakan textContent atau innerText jika tidak membutuhkan rendering tag HTML. Jika Anda wajib merender HTML terpercaya, gunakan pustaka sanitasi pihak ketiga yang teruji seperti DOMPurify untuk membersihkan elemen berbahaya sekaligus mempertahankan tag yang diizinkan.