Cross-Site Scripting (XSS) adalah kerentanan keamanan web yang memungkinkan penyerang menyuntikkan skrip berbahaya (biasanya JavaScript) ke dalam halaman web yang dilihat oleh pengguna lain. Pencegahan XSS mutlak dilakukan dengan menerapkan strategi pertahanan berlapis, mulai dari validasi input ketat, encoding ouput data, hingga penerapan Content Security Policy (CSP).
Inti dari pencegahan XSS adalah tidak pernah mempercayai data apa pun yang berasal dari pengguna (user-supplied data). Semua data yang masuk maupun keluar dari sistem harus diverifikasi, disanitasi, dan di-encode dengan benar sebelum dirender ke dalam DOM browser.
Metode Utama Pencegahan XSS
Berikut adalah matriks metode pencegahan XSS berdasarkan titik penanganan dalam siklus hidup aplikasi web:
| Metode Pencegahan | Titik Implementasi | Fungsi Utama |
|---|---|---|
| Context-Aware Output Encoding | Sisi Server / Klien (Render) | Mengubah karakter khusus (seperti <, >, ") menjadi entitas HTML yang aman. |
| Input Validation & Sanitization | Sisi Server (Sebelum Masuk DB) | Memastikan data sesuai format dan menghapus tag berbahaya menggunakan DOMPurify. |
| Content Security Policy (CSP) | HTTP Header (Browser Level) | Membatasi sumber eksekusi skrip dan mencegah eksekusi inline script. |
| HttpOnly Cookies | HTTP Response Header | Melindungi token sesi (session cookie) agar tidak dapat diakses via document.cookie. |
1. Context-Aware Output Encoding
Jangan pernah langsung merender input pengguna ke dalam HTML mentah. Gunakan fungsi encoding agar browser memperlakukan data sebagai teks murni, bukan sebagai kode eksekutable.
// Contoh rentan terhadap XSS
const userInput = "<script>alert('XSS')</script>";
document.getElementById('output').innerHTML = userInput;
// Contoh aman dengan textContent
const userInputSafe = "<script>alert('XSS')</script>";
document.getElementById('output').textContent = userInputSafe;
2. Sanitasi HTML dengan DOMPurify
Jika aplikasi Anda menuntut pengguna untuk memasukkan format HTML (misalnya rich text editor), gunakan pustaka tepercaya seperti DOMPurify untuk membersihkan skrip berbahaya sebelum dimasukkan ke dalam DOM.
import DOMPurify from 'dompurify';
const dirtyHTML = '<img src="x" onerror="alert(1)">Halaman Aman';
const cleanHTML = DOMPurify.sanitize(dirtyHTML);
document.getElementById('content').innerHTML = cleanHTML;
3. Implementasi Content Security Policy (CSP)
CSP adalah lapisan pertahanan tambahan berupa HTTP header yang mendefinisikan sumber daya apa saja yang diizinkan untuk dimuat dan dieksekusi oleh browser.
Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.com;Dengan header di atas, browser akan memblokir semua skrip inline (seperti tag <script>...</script> langsung di HTML) dan skrip dari domain luar yang tidak terdaftar.
4. Mengamankan Cookie dengan HttpOnly
Serangan XSS sering kali bertujuan mencuri token sesi pengguna melalui document.cookie. Cegah hal ini dengan menset flag HttpOnly pada cookie autentikasi di sisi server.
Set-Cookie: session_id=xyz123; Secure; HttpOnly; SameSite=StrictLangkah Teknis Implementasi
- Audit seluruh kode frontend dan pastikan tidak menggunakan
innerHTMLataudangerouslySetInnerHTMLtanpa sanitasi ketat. - Konfigurasi framework modern (seperti React, Vue, atau Angular) karena secara default melakukan escaping pada variabel ekspresi template.
- Pasang header HTTP CSP pada web server (Nginx/Apache) atau melalui konfigurasi aplikasi backend.
- Lakukan pengujian penetrasi berkala menggunakan alat otomatis seperti OWASP ZAP untuk mendeteksi celah XSS yang terlewat.