Sí, sabemos que lo tuyo es montar componentes y hacer magia con CSS. Pero si pasas por alto la seguridad, esa magia se puede convertir en pesadilla.

En esta charla del VLCTechFest nos metimos de lleno en los errores más comunes (y peligrosos) en desarrollo frontend. Spoiler: muchos se siguen cometiendo. Aquí va un resumen claro y sin humo para que no te exploten en la cara.

¿Por qué te tiene que importar la seguridad en tu frontend?

Porque tu frontend es la primera línea de defensa. Porque las cookies vuelan, los tokens se filtran, y los atacantes no duermen. Y sobre todo, porque si te pasa, ya es tarde.

2 ataques clásicos que aún se cuelan

1. CSRF (Cross-Site Request Forgery)

Tu sesión está viva, y un HTML malicioso hace una petición en tu nombre sin que te enteres. Cambiarte el email, resetear tu cuenta… fácil si no tienes protección.

Cómo evitarlo:

• Usa tokens CSRF en los formularios.
• Verifica el origen de la solicitud.
• Configura bien las cookies (SameSite, HttpOnly, Secure).
• Mejor aún: no uses cookies para auth, usa un sistema basado en tokens.

2. XSS (Cross-Site Scripting)

El clásico de los clásicos. Usas innerHTML, renderizas sin sanear inputs, y de repente alguien ejecuta un script en tu web.

Peligros reales:

• Robar el valor de las cookies o de los tokens.
• Redirecciones a páginas fake.
• Interfaces falsas (phishing).
• Keyloggers en tu propia app.

Cosas que ayudan:

• Usa textContent en lugar de innerHTML.
• Evita funciones como eval, setTimeout con strings y new Function, ya que ejecutan directamente el código.
• Si usas React, no utilices dangerouslySetInnerHTML. Si es obligatoria su utilización, asegura que no haya código ejecutable con alguna librería como DOMPurify

CORS

«En Postman me va» — El drama. Porque tu navegador sí respeta las reglas CORS. Si no configuras bien qué dominios, métodos y cabeceras aceptas, estás abriendo puertas que no deberías.

Recomendaciones clave:

• No pongas el valor * para la cabecera Access-Control-Allow-Origin, en producción. Así estás permitiendo el acceso a todos los dominios. (Si el api, es pública esto no aplica)
• Limita los métodos y los headers que estén desarrollados en el api.
• Utiliza la caché para no tener que hacer la petición preflight en cada petición.

¿Dónde guardar tus credenciales?

Si usas tokens, hay dos opciones: LocalStorage o cookies. Ambas tienen pros y contras.

Nuestra solución híbrida:

• accessToken en LocalStorage (vida corta, accesible, fácil).
• refreshToken en cookie segura (HttpOnly + Secure + SameSite).

Así, aunque un XSS robe el accessToken, no puede renovar la sesión ni quedarse a vivir en tu cuenta.

Un consejo que aprendimos a palos

No esperes a que te ataquen para ponerte serio con esto. A nosotros nos robaron unos tokens. Duele. Pero aprendimos. Y por eso montamos esta charla.

Checklist rápida para tu proyecto

•  ¿Utilizas tokens CSRF en los formularios?
•  ¿Tu configuración CORS está afinada?
•  ¿Escapas todo lo que metes en el DOM?
•  ¿Tienes las cookies bien configuradas?
•  ¿Almacenas el refreshToken en un sitio seguro?
•  ¿Revisas esto también en staging?

Si no puedes marcar todo… toca ponerse a ello.

Si te has quedado con ganas de más y quieres ver la charla completa:

Gracias a VLCTechFest. Nos vemos en la próxima charla. O mejor, antes de que te hackeen.

Esta charla la hicieron Javi y Mangel, ya sabes que para leer más contenido de este autor tienes que ir al final de este post. Pero si quieres leer más posts de Mangel, pincha aquí.