Keamanan React & Praktik Terbaik
Pencegahan XSS, perlindungan CSRF, dangerouslySetInnerHTML, Content Security Policy, HTTPS, sanitasi
1Apa itu serangan XSS (Cross-Site Scripting)?
Apa itu serangan XSS (Cross-Site Scripting)?
Jawaban
Serangan XSS melibatkan injeksi kode JavaScript berbahaya ke dalam aplikasi web untuk dieksekusi di browser pengguna lain. Penyerang mengeksploitasi kelemahan validasi atau escaping untuk mencuri cookies, session token, atau melakukan tindakan yang tidak sah. React memberikan perlindungan bawaan dengan otomatis meng-escape nilai JSX, namun kerentanan tetap ada dengan dangerouslySetInnerHTML atau manipulasi DOM langsung.
2Bagaimana React melindungi terhadap serangan XSS secara default?
Bagaimana React melindungi terhadap serangan XSS secara default?
Jawaban
React secara otomatis meng-escape semua nilai yang dimasukkan melalui JSX dengan mengonversinya menjadi teks biasa sebelum rendering. Perlindungan ini mencegah eksekusi script berbahaya meski kode HTML disuntikkan ke dalam data. Berbeda dengan innerHTML yang menginterpretasikan dan mengeksekusi HTML, React memperlakukan tag sebagai teks biasa, sehingga tidak mungkin menyuntikkan JavaScript berbahaya melalui props atau state standar.
3Mengapa dangerouslySetInnerHTML dianggap berbahaya di React?
Mengapa dangerouslySetInnerHTML dianggap berbahaya di React?
Jawaban
Properti ini melewati perlindungan XSS bawaan React dengan menyisipkan HTML mentah langsung ke DOM tanpa escaping. Jika konten berasal dari sumber yang tidak terpercaya atau API eksternal, mungkin mengandung JavaScript berbahaya yang akan dieksekusi. Nama eksplisit dangerouslySetInnerHTML memaksa pengembang untuk secara sadar mengakui risiko keamanan dan menerapkan sanitasi yang tepat dengan library seperti DOMPurify.
Apa perbedaan utama antara serangan XSS Stored dan Reflected?
Pendekatan apa yang sebaiknya digunakan untuk menampilkan HTML dari API eksternal di React?
+19 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Form & Controlled Components
Pengambilan Data & API
React Query (TanStack Query)
Styling & CSS-in-JS
Dasar-dasar Next.js
TypeScript dengan React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigasi Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Pengujian React
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Fitur Lanjutan Next.js
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis