Cross-Site Scripting (XSS) adalah kerentanan keamanan yang memungkinkan penyerang menyuntikkan skrip berbahaya (biasanya JavaScript) ke dalam halaman web yang dilihat oleh pengguna lain. Untuk mencegah XSS, aturan utamanya adalah memisahkan data dari instruksi eksekusi, menerapkan konteks encoding yang tepat, serta memanfaatkan mekanisme browser modern seperti Content Security Policy (CSP).
Panduan praktis ini merangkum strategi pencegahan XSS berdasarkan standar OWASP untuk melindungi aplikasi web dari berbagai jenis injeksi skrip, termasuk Reflected XSS, Stored XSS, dan DOM-based XSS.
Aturan Utama Pencegahan XSS
Pencegahan XSS tidak bisa diselesaikan hanya dengan satu metode tunggal. Pendekatan pertahanan berlapis (defense-in-depth) diperlukan pada setiap titik di mana data masuk dan keluar dari aplikasi.
| Konteks Penempatan Data | Teknik Pencegahan Utama | Contoh Fungsi / Pendekatan |
|---|---|---|
| HTML Body (Antara tag HTML) | HTML Entity Encoding | Mengubah < menjadi < |
Atribut HTML (class, id, dll) |
Attribute Encoding | Mengubah tanda kutip dan karakter khusus |
| JavaScript Variable / Blok Script | JavaScript Encoding / JSON serialization | Hindari memasukkan variabel mentah ke dalam tag <script> |
URL / Hyperlink (Atribut href) |
URL Validation & Skema Checking | Pastikan hanya mengizinkan protokol http:// atau https:// |
| Rich Text / HTML Input Pengguna | HTML Sanitization | Gunakan pustaka tepercaya seperti DOMPurify |
Implementasi Teknis Pencegahan XSS
1. Context-Aware Output Encoding
Encoding harus dilakukan tepat sebelum data dirender ke dalam browser. Jika data dimasukkan ke dalam elemen HTML, gunakan encoding entitas HTML agar karakter seperti <, >, &, ", dan ' dibaca sebagai teks biasa, bukan sebagai kode eksekutif.
// Contoh aman di JavaScript (mencegah DOM XSS dengan textContent)
const userInput = "<script>alert('XSS')</script>";
document.getElementById('output').textContent = userInput;
// Browser akan menampilkan teks secara harfiah tanpa mengeksekusi skrip2. Content Security Policy (CSP)
CSP adalah header HTTP yang memberitahu browser sumber daya apa saja yang diizinkan untuk dimuat dan dieksekusi. Dengan CSP yang ketat, eksekusi skrip inline (seperti <script>...</script> atau atribut onclick) dapat diblokir total meskipun penyerang berhasil menyuntikkan kode.
# Contoh Header CSP yang ketat
Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.example.com; object-src 'none';3. Sanitasi Input untuk Konten Kaya (Rich Text)
Jika aplikasi Anda memerlukan input berupa HTML (misalnya editor artikel atau komentar dengan format), encoding tidak bisa digunakan karena akan merusak tag HTML yang sah. Solusinya adalah melakukan sanitasi menggunakan pustaka khusus yang menghapus elemen berbahaya seperti tag <script>, <object>, atau atribut onerror.
// Contoh penggunaan DOMPurify di sisi klien
import DOMPurify from 'dompurify';
const dirtyHTML = '<img src="x" onerror="alert(1)"> Halo Dunia';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
document.getElementById('content').innerHTML = cleanHTML;Penggunaan HttpOnly Cookies
Untuk memitigasi dampak dari serangan XSS (jika terjadi celah), pastikan cookie sensitif seperti session ID atau token autentikasi diberi atribut HttpOnly. Dengan flag ini, skrip JavaScript sisi klien (termasuk skrip berbahaya dari XSS) tidak dapat membaca atau mencuri cookie melalui document.cookie.
Set-Cookie: session_id=xyz123; Secure; HttpOnly; SameSite=Strict