Security by Design en el Frontend React

El frontend no es “solo interfaz” — es la primera capa expuesta a usuarios, bots y ataques. En proyectos LGPD, datos sensibles e integraciones enterprise, la seguridad empieza en el JSX, no después del deploy.

Estas prácticas vienen de dashboards de compliance, portales telecom y productos con autenticación y scraping.

---

1. XSS: no confíes en HTML dinámico

dangerouslySetInnerHTML solo con sanitización estricta (DOMPurify o equivalente). Para contenido de usuario, prefiere renderizado estructurado:

tsxCopiar
// ❌ alto riesgo
<div dangerouslySetInnerHTML={{ __html: userBio }} />

// ✅ markdown sanitizado o texto plano
<ReactMarkdown>{sanitizedContent}</ReactMarkdown>

Valida también URLs en href y src — javascript: sigue apareciendo en payloads maliciosos.

---

2. Tokens: memoria vs. storage

Evita localStorage para access tokens en SPAs expuestas a XSS. Patrones más seguros:

• Cookies HttpOnly para refresh tokens (backend define Secure y SameSite)
• Access token de corta duración en memoria (state/context)
• Rotación y revocación en el servidor

Si el producto exige localStorage, documenta el trade-off y combínalo con CSP estricta.

---

3. Validación en capas

El frontend valida para UX; el backend valida para seguridad. Nunca inviertas ese orden:

tsCopiar
const emailSchema = z.string().email().max(254)
const parsed = emailSchema.safeParse(input)
if (!parsed.success) {
  setFieldError('email', 'Email inválido')
  return
}

En formularios LGPD, valida también consentimiento, finalidad y campos opcionales — datos personales mal formateados pueden convertirse en incidente.

---

4. Dependencias y superficie de ataque

npm audit no basta. Revisa también:

• Dependencias con scripts postinstall sospechosos
• Scripts de terceros vía tag manager sin CSP
• Variables VITE_* — todo expuesto en el client

Nunca pongas secrets en variables con prefijo VITE_.

---

5. Headers y políticas en el edge

Incluso en SPAs estáticas, configura en CDN o nginx:

• Content-Security-Policy (empieza en report-only)
• X-Frame-Options o frame-ancestors
• Referrer-Policy: strict-origin-when-cross-origin
• Permissions-Policy restrictiva

React no protege contra clickjacking — el edge sí.

---

Conclusión

Seguridad en frontend React combina renderizado seguro, gestión consciente de tokens, validación en capas y políticas en el edge.

Trata cada input como potencialmente malicioso, cada token como temporal y cada dependencia como punto de riesgo. Productos más seguros pasan auditorías con menos sorpresas.