HTML entity encoding dalam JavaScript adalah proses mengubah karakter khusus (seperti <, >, &, ") menjadi representasi entity amannya (seperti <, >, &, ") guna mencegah eksekusi kode berbahaya dan kerentanan Cross-Site Scripting (XSS).

JavaScript tidak menyediakan fungsi bawaan khusus untuk encoding HTML entity secara langsung pada objek string, kecuali dengan memanfaatkan DOM API browser atau pustaka pihak ketiga. Pendekatan berbasis DOM memanfaatkan parser bawaan browser untuk melakukan escape dan unescape teks secara aman tanpa risiko injeksi skrip.

Fungsi Native JavaScript untuk HTML Encoding

Cara paling aman dan standar tanpa pustaka eksternal untuk melakukan encoding adalah dengan memanfaatkan elemen teks DOM (document.createTextNode) dikombinasikan dengan properti innerHTML.

function escapeHTML(str) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(str));
    return div.innerHTML;
}

// Contoh Penggunaan:
const unsafeText = '<script>alert("XSS")</script>';
console.log(escapeHTML(unsafeText));
// Output: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

Fungsi Native JavaScript untuk HTML Decoding

Sebaliknya, untuk mengembalikan (decode) string yang berisi HTML entities kembali ke karakter normal, Anda dapat membaca nilai dari elemen DOM yang di-assign menggunakan innerHTML atau properti textContent.

function unescapeHTML(encodedStr) {
    const parser = new DOMParser();
    const dom = parser.parseFromString('<!doctype html><body>' + encodedStr, 'text/html');
    return dom.body.textContent;
}

// Contoh Penggunaan:
const encodedText = '&lt;h1&gt;Halo Dunia&lt;/h1&gt;';
console.log(unescapeHTML(encodedText));
// Output: 
Halo Dunia

Tabel Pemetaan Karakter Utama

Berikut adalah tabel karakter umum yang wajib di-encode ketika merender input pengguna ke dalam dokumen HTML:

Metode Alternatif Menggunakan Lodash

Jika proyek Anda menggunakan pustaka Lodash, fungsi untuk melakukan escape dan unescape sudah tersedia secara native melalui modul utility-nya, sehingga Anda tidak perlu menulis fungsi helper manual.

// Menggunakan Lodash
const _ = require('lodash');

const safe = _.escape('<script>alert(1)</script>');
console.log(safe); 
// Output: &lt;script&gt;alert(1)&lt;/script&gt;

const original = _.unescape('&lt;script&gt;alert(1)&lt;/script&gt;');
console.log(original);
// Output: 

Tips Troubleshooting Lapangan

Beberapa hal yang sering menjadi kendala saat menerapkan HTML entity encoding di lingkungan JavaScript:

• Lingkungan Node.js (SSR): Metode DOM seperti document.createElement tidak tersedia di server-side Node.js murni. Gunakan pustaka pihak ketiga seperti he atau lodash untuk lingkungan Node.js.
• Double Encoding: Pastikan Anda tidak melakukan encode dua kali pada string yang sama, karena karakter & akan berubah menjadi &.
• Kontekstual Escaping: Encoding HTML entity hanya efektif jika data dimasukkan ke dalam elemen HTML text node. Jika data dimasukkan ke dalam atribut HTML (seperti href atau onclick), Anda memerlukan teknik escaping khusus atribut.