XSS Basics
Mengenali kapan content user dapat menjadi risiko rendering dan memilih default text rendering atau sanitization path yang tepat.
Tujuan belajar
- Menjelaskan XSS sebagai risiko saat content tidak tepercaya diinterpretasikan sebagai kode atau markup aktif
- Membedakan text rendering default dari raw HTML rendering
- Menentukan kapan rich text membutuhkan sanitization path yang direview
- Memahami CSP sebagai defense-in-depth, bukan pengganti safe rendering
Isi lesson
6 blok- 1.Content user adalah data, bukan instruksi untuk browserBelum selesaiWajib
- 2.Default aman untuk review textBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Escape hatch membutuhkan alasan dan reviewBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Content user adalah data, bukan instruksi untuk browser
WajibCross-Site Scripting atau XSS terjadi ketika content yang tidak tepercaya dapat diperlakukan browser sebagai markup atau code aktif. Pada product sehari-hari, sumbernya dapat berupa review, note, display name, rich text, data CMS, atau response dari integration. Risiko bukan berarti setiap string user otomatis berbahaya. Risiko muncul ketika aplikasi membuka jalur yang mengubah content tersebut dari text menjadi HTML atau context browser lain tanpa boundary yang benar.
React secara default merender nilai JSX sebagai text, sehingga pola normal seperti menaruh body review di dalam paragraph adalah pilihan aman untuk text biasa. Risiko meningkat saat code memakai raw HTML rendering, DOM API yang menulis HTML, URL dinamis tanpa validasi khusus, atau third-party component yang tidak jelas behavior-nya. Bila product benar-benar membutuhkan rich text, buat jalur khusus dengan source yang jelas, sanitization policy yang direview, dan ownership backend/security yang dapat diaudit.
Bagian ini memengaruhi progres lesson.
Default aman untuk review text
Wajibtype CourseReviewProps = {
body: string;
};
export function CourseReview({ body }: CourseReviewProps) {
return <p>{body}</p>;
}body dirender sebagai text melalui JSX biasa. Contoh ini bukan rich text renderer dan tidak mencoba mengubah isi review menjadi HTML. Jika requirement meminta formatting HTML, jangan langsung memakai escape hatch raw HTML. Konfirmasi sumber content, sanitization approach, allowed markup, URL policy, test case, dan owner sebelum jalur itu dibuat.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususIdentify safe course review rendering
Nyatakan default rendering untuk review user dan boundary saat rich text benar-benar diperlukan.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Untuk body review yang hanya perlu tampil sebagai text, pilihan frontend paling aman adalah
Progres lesson naik setelah jawaban benar.
Peringatan
WajibEscape hatch membutuhkan alasan dan review
API raw HTML atau direct DOM HTML bukan shortcut formatting. Jangan memakai jalur tersebut untuk memecahkan line break, markdown, atau content CMS tanpa memahami sanitization dan policy-nya. Jangan menulis atau menguji payload pada production data. Jika menemukan raw HTML rendering yang tidak jelas, catat component, source content, user impact, dan owner yang perlu menilai risk.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- XSS berkaitan dengan content tidak tepercaya yang diinterpretasikan browser sebagai markup atau code aktif.
- JSX text rendering default adalah pilihan tepat untuk content text biasa.
- Rich text membutuhkan jalur sanitization dan ownership yang sengaja dirancang.
- CSP membantu membatasi dampak, tetapi tidak menggantikan safe rendering.
- Berikutnya, kita melihat CSRF pada mutation yang memakai cookie-based authentication.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Content user adalah data, bukan instruksi untuk browser.