# Keamanan React & Praktik Terbaik (React / Next.js) > Pencegahan XSS, perlindungan CSRF, dangerouslySetInnerHTML, Content Security Policy, HTTPS, sanitasi - 22 pertanyaan wawancara - Senior - [Pertanyaan Wawancara: React / Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara.md) ## 1. 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. ## 2. 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. ## 3. 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. ## 19 pertanyaan lagi tersedia - Apa perbedaan utama antara serangan XSS Stored dan Reflected? - Pendekatan apa yang sebaiknya digunakan untuk menampilkan HTML dari API eksternal di React? Daftar gratis: https://sharpskill.dev/id/login ## Topik wawancara React / Next.js lainnya - [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/javascript-essentials.md): 25 pertanyaan, Junior - [Dasar-Dasar React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-fundamentals.md): 20 pertanyaan, Junior - [React Hooks](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-hooks.md): 22 pertanyaan, Junior - [Siklus hidup komponen](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/component-lifecycle.md): 18 pertanyaan, Junior - [React Router](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-router.md): 20 pertanyaan, Junior - [Manajemen state dengan Context](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/state-management-context.md): 18 pertanyaan, Junior - [Form & Controlled Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/forms-controlled-components.md): 20 pertanyaan, Mid-Level - [Pengambilan Data & API](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/fetching-data-api.md): 20 pertanyaan, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-query-tanstack.md): 20 pertanyaan, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/styling-css-in-js.md): 18 pertanyaan, Mid-Level - [Dasar-dasar Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-fundamentals.md): 25 pertanyaan, Mid-Level - [TypeScript dengan React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/typescript-react.md): 20 pertanyaan, Mid-Level - [Data Fetching Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-data-fetching.md): 24 pertanyaan, Mid-Level - [Server Actions Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-server-actions.md): 20 pertanyaan, Mid-Level - [Routing & Navigasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-routing-navigation.md): 22 pertanyaan, Mid-Level - [API Routes Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-api-routes.md): 20 pertanyaan, Mid-Level - [Metadata & SEO di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-metadata-seo.md): 18 pertanyaan, Mid-Level - [Middleware & Auth di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-middleware-auth.md): 22 pertanyaan, Mid-Level - [Pengujian React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-testing.md): 20 pertanyaan, Mid-Level - [Zustand State Management](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/zustand-state-management.md): 18 pertanyaan, Mid-Level - [Optimasi Performa React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization.md): 22 pertanyaan, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 pertanyaan, Senior - [Advanced React Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/advanced-react-patterns.md): 20 pertanyaan, Senior - [Fitur Lanjutan Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-advanced-features.md): 24 pertanyaan, Senior - [Deployment & Produksi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-deployment-production.md): 20 pertanyaan, Senior - [Architecture & Design Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-architecture-patterns.md): 22 pertanyaan, Senior - [React Server Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-server-components.md): 26 pertanyaan, Senior - [Internasionalisasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-internationalization.md): 20 pertanyaan, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-security-best-practices