Konsep Cross-Site Scripting
Pelajari konsep XSS dari sisi pertahanan: jenis-jenisnya, mengapa terjadi, serta pencegahan lewat output encoding, CSP, dan praktik penulisan front-end yang aman.
Tujuan Pembelajaran
- Menjelaskan apa itu XSS dan dampaknya bagi pengguna
- Membedakan XSS reflected, stored, dan DOM-based secara konseptual
- Menerapkan output encoding sesuai konteks penempatan data
- Menggunakan Content Security Policy dan flag cookie sebagai pertahanan berlapis
01Apa itu XSS?
Cross-Site Scripting (XSS) terjadi ketika aplikasi menampilkan data yang tidak tepercaya di halaman tanpa penanganan yang benar, sehingga browser menafsirkan data itu sebagai kode yang harus dijalankan. Kode tersebut berjalan dengan hak dan asal (origin) situs yang sah.
Dampaknya mengenai pengguna, bukan server: tampilan halaman dapat diubah, tindakan dapat dilakukan atas nama pengguna, dan data di halaman dapat terbaca. Karena itu XSS termasuk risiko serius pada aplikasi web.
02Tiga jenis XSS
Perbedaan jenis terletak pada dari mana data tidak tepercaya berasal dan di mana ia diproses.
- Reflected: data dari permintaan langsung dipantulkan ke respons halaman
- Stored: data disimpan di server, misalnya komentar, lalu ditampilkan kepada banyak pengguna
- DOM-based: kode JavaScript di browser sendiri memasukkan data tidak tepercaya ke halaman secara tidak aman
03Pertahanan utama: output encoding
Pencegahan terbaik adalah memastikan data selalu diperlakukan sebagai teks, bukan sebagai markup atau kode. Lakukan encoding saat data ditulis ke halaman, sesuai konteksnya: isi HTML, atribut, JavaScript, atau URL memerlukan aturan encoding yang berbeda.
Gunakan kerangka kerja yang melakukan escape otomatis, seperti React atau templating modern, dan jangan mematikan perlindungan itu tanpa alasan kuat. Jika memang perlu menampilkan HTML dari pengguna, bersihkan dengan pustaka sanitasi tepercaya seperti DOMPurify.
04Pertahanan berlapis
Selain encoding, tambahkan kontrol yang memperkecil dampak bila ada celah yang terlewat.
- Content-Security-Policy (CSP): membatasi dari mana skrip boleh dimuat dan melarang skrip inline
- Cookie dengan HttpOnly, Secure, dan SameSite agar sesi sulit dicuri
- Validasi input dengan allowlist sebagai lapisan tambahan, bukan pengganti encoding
- Hindari API berbahaya seperti innerHTML, document.write, dan eval pada data tidak tepercaya
Contoh Praktis (Aman)
Menampilkan data sebagai teks dan CSP dasarContoh defensif di front-end dan server. Perhatikan perbedaan antara memasukkan data sebagai teks dan sebagai markup.
// AMAN: textContent memperlakukan nilai sebagai teks murni
const el = document.querySelector('#komentar');
el.textContent = dataDariPengguna;
// HINDARI: innerHTML menafsirkan nilai sebagai markup
// el.innerHTML = dataDariPengguna;
// Jika HTML pengguna memang diperlukan, sanitasi dulu
// el.innerHTML = DOMPurify.sanitize(dataDariPengguna);
// Server: kirim header CSP yang ketat
res.setHeader(
'Content-Security-Policy',
"default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'"
);
res.cookie('sid', token, { httpOnly: true, secure: true, sameSite: 'lax' });Rangkuman
- XSS terjadi saat data tidak tepercaya ditafsirkan browser sebagai kode
- Jenisnya: reflected, stored, dan DOM-based, dibedakan oleh asal dan lokasi pemrosesan data
- Pertahanan utama adalah output encoding sesuai konteks dan penggunaan kerangka kerja dengan escape otomatis
- CSP dan cookie HttpOnly/Secure/SameSite memperkecil dampak bila ada celah
Mini Quiz
Pilih satu jawaban untuk setiap soal, lalu tekan "Periksa Jawaban".
Pernyataan mana yang menggambarkan XSS tersimpan (stored)?
Cara paling tepat memasukkan data pengguna sebagai teks ke elemen halaman adalah...
Apa peran Content-Security-Policy dalam menghadapi XSS?