💡 ULASAN & REFERENSI • DIPERBARUI: 21 October 2026 • REDAKSI AZWINN

Javascript Context-Aware Encoding: Panduan Keamanan XSS

Definisi dan Mekanisme Kerja

Context-Aware Encoding adalah teknik keamanan siber untuk mencegah serangan Cross-Site Scripting (XSS) dengan cara mengubah karakter khusus menjadi representasi aman (HTML entities) berdasarkan lokasi di mana data tersebut akan dirender. Teknik ini krusial karena karakter yang aman di dalam tag HTML bisa menjadi berbahaya jika ditempatkan di dalam atribut tag, blok JavaScript, atau CSS.

Mengapa Encoding Harus Sesuai Konteks?

Browser menginterpretasikan data secara berbeda tergantung pada konteksnya. Jika Anda melakukan encoding untuk HTML body tetapi menempatkan data tersebut di dalam atribut href, penyerang tetap bisa melakukan injeksi melalui protokol javascript:. Oleh karena itu, encoding harus disesuaikan dengan target output.

Konteks OutputStrategi EncodingContoh Bahaya
HTML BodyEscape <, >, &, ", '<script>alert(1)</script>
HTML AttributeEscape semua karakter non-alphanumericonmouseover=alert(1)
JavaScript DataUnicode escape (\uXXXX)'; alert(1); //
CSSHex escape (\HH)expression(alert(1))

Implementasi Teknis

Untuk melakukan encoding secara aman, hindari manipulasi string manual. Gunakan pustaka yang teruji seperti DOMPurify untuk sanitasi HTML atau fungsi bawaan framework modern yang sudah menerapkan auto-escaping.

// Contoh Encoding Sederhana untuk HTML Body
function encodeHTML(str) {
  return str.replace(/[&<>"']/g, function(m) {
    return {
      '&': '&',
      '<': '<',
      '>': '>',
      '"': '"',
      "'": '''
    }[m];
  });
}

// Penggunaan pada elemen DOM
const userInput = "";
const safeElement = document.createElement('div');
safeElement.textContent = userInput; // Browser otomatis melakukan encoding
document.body.appendChild(safeElement);

Langkah Pencegahan Terbaik

  1. Gunakan Framework Modern: React, Vue, dan Angular secara default melakukan encoding pada data yang di-render di template.
  2. Content Security Policy (CSP): Terapkan header CSP untuk membatasi eksekusi skrip dari sumber yang tidak terpercaya.
  3. Hindari Sink Berbahaya: Jangan gunakan innerHTML, outerHTML, atau document.write() dengan input pengguna. Gunakan textContent atau innerText sebagai gantinya.
  4. Sanitasi Input: Jika harus menerima HTML, gunakan pustaka DOMPurify untuk membersihkan elemen berbahaya sebelum di-render.

Troubleshooting Lapangan

Jika aplikasi Anda masih rentan terhadap XSS meskipun sudah melakukan encoding, periksa hal berikut: 1) Apakah data di-encode dua kali (double encoding) yang merusak tampilan? 2) Apakah Anda menggunakan dangerouslySetInnerHTML di React tanpa sanitasi? 3) Apakah ada input yang masuk ke dalam URL (seperti parameter query) yang tidak divalidasi sebelum digunakan dalam window.location?

🔍 Orang Lain Juga Mencari Ini