React Security & Best Practices
XSS prevention, CSRF protection, dangerouslySetInnerHTML, Content Security Policy, HTTPS, sanitization
1What is an XSS (Cross-Site Scripting) attack?
What is an XSS (Cross-Site Scripting) attack?
Answer
An XSS attack involves injecting malicious JavaScript code into a web application to execute it in other users' browsers. The attacker exploits validation or escaping flaws to steal cookies, session tokens, or perform unauthorized actions. React provides native protection by automatically escaping JSX values, but vulnerabilities remain with dangerouslySetInnerHTML or direct DOM manipulation.
2How does React protect against XSS attacks by default?
How does React protect against XSS attacks by default?
Answer
React automatically escapes all values inserted via JSX by converting them to plain text before rendering. This protection prevents malicious script execution even if HTML code is injected into the data. Unlike innerHTML which interprets and executes HTML, React treats tags as plain text, making it impossible to inject malicious JavaScript through standard props or state.
3Why is dangerouslySetInnerHTML considered dangerous in React?
Why is dangerouslySetInnerHTML considered dangerous in React?
Answer
This property bypasses React's native XSS protection by inserting raw HTML directly into the DOM without escaping. If the content comes from an untrusted source or external API, it may contain malicious JavaScript that will be executed. The explicit name dangerouslySetInnerHTML forces developers to consciously acknowledge the security risk and implement proper sanitization with libraries like DOMPurify.
What is the main difference between a Stored XSS and Reflected XSS attack?
What approach should be preferred to display HTML from an external API in React?
+19 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free