XML Entity Encoding di JavaScript: Teknik dan Implementasi

Metode Encoding XML Entity di JavaScript

XML entity encoding adalah proses mengubah karakter khusus (seperti <, >, &, ", dan ') menjadi representasi entitas XML yang aman agar tidak disalahartikan oleh parser sebagai markup. Dalam JavaScript, tidak ada fungsi bawaan (built-in) tunggal untuk melakukan ini, sehingga pendekatan yang paling efisien adalah menggunakan pemetaan objek (lookup table) atau manipulasi DOM.

Implementasi Menggunakan Fungsi Custom

Cara paling aman dan performan untuk melakukan encoding tanpa ketergantungan pustaka eksternal adalah dengan menggunakan metode replace dengan Regular Expression. Berikut adalah implementasi standar industri:

function encodeXMLEntities(str) {
  const map = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };
  return str.replace(/[&<>'"\/]/g, (s) => map[s]);
}

// Contoh penggunaan:
const input = "";
const encoded = encodeXMLEntities(input);
console.log(encoded); // <script>alert('XSS')</script>

Tabel Karakter XML Entity

Pendekatan Manipulasi DOM (Browser-Only)

Jika Anda bekerja di lingkungan browser, Anda dapat memanfaatkan properti textContent dari elemen DOM untuk melakukan encoding secara otomatis. Teknik ini sangat efektif karena browser akan menangani konversi karakter secara native.

function encodeViaDOM(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

// Contoh:
console.log(encodeViaDOM("Test")); // <b>Test</b>

Pertimbangan Keamanan

Encoding XML entity adalah langkah krusial dalam mitigasi serangan Cross-Site Scripting (XSS). Namun, perlu diingat bahwa encoding saja tidak cukup jika data tersebut akan dimasukkan ke dalam atribut HTML atau konteks JavaScript yang berbeda. Selalu gunakan prinsip context-aware output encoding. Jika aplikasi Anda menangani data XML yang sangat kompleks, disarankan untuk menggunakan pustaka yang sudah teruji seperti he atau xmlbuilder2 untuk memastikan kepatuhan terhadap spesifikasi XML 1.0/1.1.

Troubleshooting Umum

• Karakter Unicode: Jika data mengandung karakter non-ASCII, pastikan file JavaScript Anda disimpan dengan encoding UTF-8.
• Double Encoding: Pastikan Anda tidak melakukan encoding dua kali pada string yang sama, karena ini akan merusak data (misalnya & menjadi &).
• Konteks Atribut: Jika data dimasukkan ke dalam atribut HTML, pastikan untuk melakukan encoding pada tanda kutip (quote) agar tidak terjadi attribute breakout.