React Security & Buenas Prácticas
Prevención de XSS, protección CSRF, dangerouslySetInnerHTML, Content Security Policy, HTTPS, sanitización
1¿Qué es un ataque XSS (Cross-Site Scripting)?
¿Qué es un ataque XSS (Cross-Site Scripting)?
Respuesta
Un ataque XSS consiste en inyectar código JavaScript malicioso en una aplicación web para ejecutarlo en el navegador de otros usuarios. El atacante explota fallas de validación o escape para robar cookies, tokens de sesión o realizar acciones no autorizadas. React ofrece protección nativa escapando automáticamente los valores JSX, pero persisten vulnerabilidades con dangerouslySetInnerHTML o la manipulación directa del DOM.
2¿Cómo protege React contra los ataques XSS por defecto?
¿Cómo protege React contra los ataques XSS por defecto?
Respuesta
React escapa automáticamente todos los valores insertados a través de JSX convirtiéndolos en texto plano antes del renderizado. Esta protección evita la ejecución de scripts maliciosos incluso si se inyecta código HTML en los datos. A diferencia de innerHTML que interpreta y ejecuta HTML, React trata las etiquetas como texto plano, haciendo imposible la inyección de JavaScript malicioso a través de props o state estándar.
3¿Por qué dangerouslySetInnerHTML se considera peligroso en React?
¿Por qué dangerouslySetInnerHTML se considera peligroso en React?
Respuesta
Esta propiedad evita la protección XSS nativa de React al insertar HTML sin procesar directamente en el DOM sin escape. Si el contenido proviene de una fuente no confiable o de una API externa, puede contener JavaScript malicioso que será ejecutado. El nombre explícito dangerouslySetInnerHTML obliga a los desarrolladores a reconocer conscientemente el riesgo de seguridad e implementar una sanitización adecuada con bibliotecas como DOMPurify.
¿Cuál es la diferencia principal entre un ataque XSS Stored y Reflected?
¿Qué enfoque debe preferirse para mostrar HTML proveniente de una API externa en React?
+19 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Styling & CSS-in-JS
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis