Input Sanitization
Membedakan validation, safe rendering, dan sanitization supaya input user diproses sesuai kebutuhan product tanpa membuat false security.
Tujuan belajar
- Membedakan client validation, server validation, output encoding, dan sanitization
- Menentukan kapan plain text cukup dan kapan rich text membutuhkan boundary tambahan
- Memahami input user sebagai untrusted data pada setiap layer
- Menyebutkan rule product yang perlu divalidasi server-side
Isi lesson
6 blok- 1.Validation dan sanitization menjawab pertanyaan berbedaBelum selesaiWajib
- 2.Peta handling untuk note Course AdminBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan membangun security dari regex di componentBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Validation dan sanitization menjawab pertanyaan berbeda
WajibValidation memeriksa apakah input memenuhi rule product: title wajib ada, panjang note sesuai batas, course_id valid, atau file size sesuai limit. Client validation memberi feedback cepat, tetapi server tetap menegakkan rule karena browser input tidak dapat dipercaya. Sanitization berbeda: ia memproses content yang akan diperlakukan sebagai markup agar hanya bentuk yang diizinkan dapat melewati jalur rich text. Untuk plain text, pilihan terbaik biasanya tidak mengubahnya menjadi HTML sama sekali dan merendernya sebagai text.
Output encoding atau default framework escaping memastikan nilai yang tampil diperlakukan sebagai data pada context render yang sesuai. Tidak ada satu regex atau satu client helper yang dapat menggantikan seluruh boundary. Tentukan dahulu apakah feature benar-benar membutuhkan rich text, URL user-generated, atau hanya text. Lalu pilih policy yang minimal, dapat diuji, dan dimiliki team yang bertanggung jawab.
Bagian ini memengaruhi progres lesson.
Peta handling untuk note Course Admin
Wajibconst noteInputHandling = {
clientValidation: "show required and length feedback",
serverValidation: "enforce product rules and authorization",
plainTextRender: "render as text by default",
richTextException: "use reviewed sanitization before approved HTML rendering",
};Client validation meningkatkan UX, tetapi server memastikan rule dan permission. Plain text tidak memerlukan raw HTML path. Jika rich text benar-benar merupakan requirement, sanitization harus menjadi bagian flow yang jelas dan diuji, bukan function acak di component. Contoh ini tidak memilih library atau policy; pilihan tersebut perlu architecture serta security review.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususDecide course input handling boundary
Nyatakan peran client validation, server validation, text rendering, dan reviewed rich text path.
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
Manakah pembagian responsibility yang paling tepat untuk form note?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibJangan membangun security dari regex di component
Regex sederhana dapat membantu format UX tertentu, tetapi bukan sanitization policy umum dan bukan server enforcement. Hindari memotong content secara tak terduga atau menciptakan raw HTML path hanya agar format terlihat cepat jadi. Bila data berasal dari user, CMS, atau external API, catat source, render context, allowed behavior, dan owner validation sebelum merilisnya.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Client validation memberi feedback; server validation menegakkan rule dan authorization.
- Plain text sebaiknya tetap dirender sebagai text melalui framework default.
- Sanitization diperlukan pada jalur rich text yang memang disetujui dan direview.
- Tidak ada helper client tunggal yang menggantikan policy serta boundary server.
- Berikutnya, kita memperlakukan dependency sebagai code yang ikut membawa risk ke product.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Validation dan sanitization menjawab pertanyaan berbeda.