Pelajari XSS (Cross-Site Scripting) dengan contoh, cara kerja, dan praktik pencegahan untuk keamanan aplikasi web Anda.

Bayangkan kamu sedang membuka blog favorit, menulis komentar, atau sekadar mengeklik tautan yang dikirim teman. Tanpa sadar, halaman web itu bisa saja menyisipkan skrip berbahaya yang mengambil cookie-mu, mencuri data login, atau bahkan mengubah tampilan halaman. Fenomena inilah yang dikenal sebagai XSS atau Cross-Site Scripting.

Dalam artikel ini, kita akan membedah XSS mulai dari sejarah singkat, jenis-jenis serangan, cara kerjanya, sampai langkah-langkah pencegahan yang bisa kamu implementasikan langsung di aplikasi web. Kita akan menggunakan contoh praktis berbasis PHP/Laravel agar lebih mudah dipahami.

Sejarah Singkat XSS

XSS mulai dikenal luas pada akhir 1990-an ketika web dinamis mulai populer. Awalnya, serangan ini cukup sederhana: penyerang menambahkan <script>alert('Hacked!')</script> ke halaman web untuk membuktikan bahwa situs itu rentan. Seiring berkembangnya web, XSS menjadi salah satu kerentanan paling umum yang sering ditemukan dalam aplikasi web modern, bahkan tercatat sebagai salah satu top 10 risiko OWASP.

Apa Itu XSS?

Cross-Site Scripting (XSS) adalah kerentanan keamanan di aplikasi web yang memungkinkan penyerang menyisipkan skrip berbahaya ke dalam halaman web yang dilihat pengguna lain. Skrip ini biasanya ditulis menggunakan JavaScript, tetapi bisa juga dalam bentuk HTML atau format lainnya.

Tujuan utama XSS bisa beragam, antara lain:

• Mencuri data pengguna seperti cookie atau token sesi.

• Membajak sesi pengguna (session hijacking).

• Mengubah tampilan halaman web (deface).

• Mengelabui pengguna agar melakukan aksi tertentu, misalnya phishing atau klik palsu.

Intinya, XSS memanfaatkan kepercayaan browser terhadap konten yang dikirim server. Browser mengeksekusi skrip seolah-olah itu bagian sah dari situs, padahal skrip itu berasal dari penyerang.

Cara Kerja XSS

Secara sederhana, XSS bekerja melalui empat tahap utama:

1. Penyerang menyisipkan kode jahat ke dalam input pengguna, seperti form komentar, input search, atau parameter URL.

2. Server mengembalikan data itu ke halaman web tanpa menyaring atau menyanitasi input secara benar.

3. Browser menampilkan data itu, menjalankan skrip, dan menganggapnya sebagai konten sah.

4. Penyerang bisa mencuri data, memanipulasi DOM, atau mengarahkan pengguna ke situs berbahaya.

Jenis-Jenis XSS

1. Stored XSS (Persistent)

Stored XSS terjadi ketika skrip berbahaya disimpan di server, misalnya di database, file, atau log. Skrip ini dieksekusi setiap kali halaman yang bersangkutan diakses. Stored XSS termasuk paling berbahaya karena bisa mempengaruhi banyak pengguna sekaligus.

Contoh:

Seorang penyerang menulis komentar berikut di artikel blog:

<script>alert('XSS Attack!')</script>

Komentar ini tersimpan di database dan ditampilkan ke semua pengunjung artikel tersebut. Saat halaman dimuat, semua pengunjung akan melihat alert popup yang dijalankan skrip tersebut.

2. Reflected XSS

Reflected XSS terjadi ketika skrip jahat dikirim melalui URL atau form dan langsung dikembalikan oleh server tanpa disimpan. Serangan ini bersifat sementara dan biasanya dikombinasikan dengan phishing.

Contoh:

Pengguna membuka URL:

https://example.com/search?q=<script>alert('Reflected XSS')</script>

Jika server langsung menampilkan parameter q tanpa sanitasi, browser akan mengeksekusi skrip, menampilkan alert, dan bisa mengambil data pengguna.

3. DOM-Based XSS

DOM-Based XSS terjadi sepenuhnya di sisi client (browser). Server tidak menyimpan atau memproses skrip, namun penyerang mengeksploitasi manipulasi DOM di JavaScript.

Contoh:

const params = new URLSearchParams(window.location.search);
document.getElementById('output').innerHTML = params.get('name');

Jika penyerang mengakses:

https://example.com/?name=<script>alert('DOM XSS')</script>

Skrip akan dieksekusi karena innerHTML menempatkan input langsung ke DOM tanpa validasi.

Dampak XSS

Dampak XSS bisa ringan hingga sangat berbahaya, tergantung skala serangan dan data yang terekspos. Beberapa dampak umum adalah:

Cara Mencegah XSS

Pencegahan XSS harus dilakukan dari dua sisi: server dan client. Berikut langkah-langkah praktis yang bisa diterapkan.

1. Escape Output

Escape karakter khusus HTML (<, >, ", ') saat menampilkan data ke browser. Di Laravel, gunakan helper e():

{{ e($userInput) }}

Di PHP biasa, gunakan htmlspecialchars():

echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');

Dengan cara ini, browser menampilkan input sebagai teks biasa, bukan kode yang dijalankan.

2. Sanitize Input

Bersihkan input dari user. Misalnya, jika aplikasi hanya menerima angka, jangan izinkan karakter lain.

$age = filter_input(INPUT_POST, 'age', FILTER_VALIDATE_INT);

Di Laravel, gunakan validasi bawaan:

$request->validate([
    'username' => 'required|string|max:50',
]);

3. Gunakan Content Security Policy (CSP)

CSP adalah header keamanan yang mengontrol skrip apa saja yang boleh dijalankan di browser. Contoh implementasi:

Content-Security-Policy: default-src 'self'; script-src 'self'

Ini mencegah skrip eksternal atau inline yang tidak diizinkan dijalankan.

4. Hindari eval() dan innerHTML

Fungsi seperti eval(), document.write(), dan innerHTML bisa membuka celah XSS jika digunakan dengan input tidak terpercaya. Gunakan metode yang lebih aman seperti textContent.

document.getElementById('output').textContent = userInput;

5. Gunakan Framework Modern

Framework seperti React, Angular, dan Vue secara default melakukan escape otomatis pada data yang ditampilkan. Jadi risiko XSS berkurang drastis jika digunakan sesuai best practice.

6. Validasi di Server dan Client

Validasi client-side membantu UX, tapi tidak cukup. Selalu lakukan validasi server-side menggunakan whitelist atau regex untuk input tertentu.

Contoh Kasus XSS Praktis

Input user (tanpa filter):

<input type="text" name="username" value="<?php echo $_GET['username']; ?>">

Pengguna mengakses:

https://example.com/?username=<script>alert('XSS')</script>

Browser akan merender:

<input type="text" name="username" value="<script>alert('XSS')</script>">

Akibatnya, skrip dijalankan dan alert muncul. Pencegahan sederhana:

<input type="text" name="username" value="<?php echo htmlspecialchars($_GET['username'], ENT_QUOTES, 'UTF-8'); ?>">

Tools & Referensi untuk Belajar XSS

Beberapa sumber dan tools populer yang bisa membantu developer belajar XSS:

• OWASP XSS Cheat Sheet – Panduan lengkap serangan dan pencegahan.

• Content Security Policy Guide (MDN) – Referensi resmi CSP.

• XSS Game by Google – Latihan interaktif XSS sambil bermain.

Kesimpulan

XSS adalah ancaman serius di dunia web development. Meskipun terlihat sederhana, dampaknya bisa sangat merusak, termasuk pencurian data, deface, dan phishing. Untuk developer pemula dan menengah, prinsip utama adalah never trust user input. Selalu sanitasi input, escape output, gunakan CSP, hindari fungsi berbahaya di JavaScript, dan manfaatkan framework modern yang aman.

Dengan langkah-langkah ini, aplikasi webmu akan lebih aman dari serangan XSS, dan pengguna bisa menikmati pengalaman yang terpercaya.

FAQ Singkat

1. Apakah XSS hanya terjadi di JavaScript?
Tidak. Meskipun JavaScript paling umum, XSS bisa terjadi lewat HTML, CSS, atau format lain yang dijalankan di browser.

2. Apakah framework seperti React sepenuhnya mencegah XSS?
React melakukan escape otomatis pada data, tapi developer tetap harus berhati-hati saat menggunakan dangerouslySetInnerHTML.

3. Apakah CSP wajib digunakan?
CSP tidak wajib, tapi sangat direkomendasikan sebagai lapisan keamanan tambahan untuk mencegah skrip berbahaya.

4. Bagaimana cara mengetahui aplikasi saya rentan XSS?
Gunakan tools seperti OWASP ZAP, Burp Suite, atau XSS Game untuk menguji kerentanan aplikasi.

5. Apakah XSS bisa terjadi di aplikasi mobile?
Ya, jika aplikasi menampilkan konten web menggunakan WebView yang tidak aman.