Un investigador robó contraseñas desde tu correo — y solo usó CSS

Imagina esto: abres un email aparentemente normal de tu banco, un amigo, o una plataforma que usas todos los días. No haces clic en ningún enlace. No descargas nada. Solo lo lees. Y mientras lo lees, un script invisible dentro del email ya está extrayendo tu contraseña, tu token de sesión, y tu dirección IP. Todo con CSS.

No es ciencia ficción. Es un ataque real que Gareth Heyes, investigador de PortSwigger, acaba de documentar en un paper que ha dejado a la industria de ciberseguridad en estado de shock. El paper se llama "CSS: The Bomb Inside Your Inbox" y demuestra que prácticamente todos los clientes de correo electrónico del mundo son vulnerables.

¿Cómo es posible que CSS robe contraseñas?

El CSS (Cascading Style Sheets) es el lenguaje que le da color, forma y diseño a las páginas web. Los clientes de correo como Gmail, Outlook, Yahoo Mail, ProtonMail y Fastmail renderizan HTML y CSS en los emails que recibes. Y aquí está el problema: los filtros de seguridad (sanitizers) que deberían bloquear código malicioso tienen lagunas enormes.

Heyes descubrió que puedes usar selectores de atributos CSS para bruteforcear tokens de autenticación carácter por carácter. Por ejemplo, si Medium te envía un token de login por email de 12 caracteres hexadecimales, un atacante puede crear un CSS que envíe una petición a su servidor cada vez que un carácter del token coincide con un selector. En minutos, el token completo está en manos del atacante.

Los 7 ataques que demostró

Lo que hace este paper aterrador es la cantidad de vectores de ataque diferentes que Heyes encontró:

1. Robo de tokens vía clipboard: Copias tu dirección IP de una web y la pegas en un draft de tu correo. El CSS malicioso que venía en la página se pega junto con ella. Al guardar el draft, Yahoo o AOL ejecutan el CSS y exfiltran el token de sesión a un servidor remoto. Ni siquiera necesitas enviar el email.

2. Keylogger en tiempo real en Chrome: Usando una propiedad HTML nueva llamada interestfor, Heyes construyó un keylogger que captura cada tecla que escribes en Chrome. Un select por cada letra del alfabeto, encadenados con CSS, capturan tu contraseña carácter por carácter en tiempo real.

3. Control de Outlook desde un email: Usando etiquetas HTML (<label>) con el atributo for, un atacante puede manipular la interfaz de Outlook — abrir el ribbon, pinneear mensajes, y ejecutar acciones sin que la víctima haga clic en nada sospechoso. Microsoft no lo ha parcheado.

4. Prompt injection en navegadores AI: Heyes descubrió que puede usar pseudo-elementos CSS (:before y :after) para esconder texto malicioso que el ojo humano no ve pero que un navegador AI como Atlas de OpenAI sí procesa. El resultado: un email aparentemente inocente que le dice al navegador AI que abra pestañas y exfilte datos del usuario.

5. Rastreo de apertura en Fastmail: CSS puede detectar si abriste el email en Fastmail, rastreando qué estilos se cargan.

6. Tu IP visible en ProtonMail: Un bypass en el proxy de imágenes de ProtonMail permite que un atacante vea tu dirección IP real cuando abres un email — algo que ProtonMail promete no hacer.

7. Defacing de Outlook: Usando "CSS gadgets", un atacante puede cambiar la apariencia completa de tu bandeja de entrada de Outlook, ocultando emails importantes y mostrando falsos.

¿Por qué los filtros de seguridad no funcionan?

Los clientes de correo usan sanitizers — filtros que revisan el HTML y CSS de los emails antes de mostrártelos. Pero Heyes encontró discrepancias críticas entre lo que el sanitizer piensa que es seguro y lo que el navegador realmente renderiza.

Algunos clientes como Fastmail dejan pasar etiquetas <label> sin filtrar el atributo for. Otros como AOL y Yahoo permiten inline styles que ejecutan peticiones de fondo. Y el caso más peligroso: cuando el sanitizer deja pasar pseudo-elementos CSS, puedes esconder texto invisible que altera el contexto para navegadores AI.

El problema de fondo: los sanitizers intentan ser restrictivos pero el estándar web evoluciona tan rápido que siempre hay nuevas propiedades CSS que no están en la lista negra. Cada actualización de navegador potencialmente abre una nueva ventana de ataque.

¿Qué puedes hacer para protegerte?

Heyes publicó las defensas específicas para cada cliente, pero hay medidas generales que todos deberían tomar:

No pegues contenido de sitios web en borradores de correo — especialmente si el sitio es desconocido. El ataque de clipboard funciona porque el CSS malicioso viaja junto con el texto copiado.

Desactiva la carga de imágenes externas en tu cliente de correo. Muchos de estos ataques dependen de que el navegador haga peticiones a servidores remotos para cargar recursos CSS.

Usa un bloqueador de CSS personalizado si tu cliente de correo lo permite. Fastmail, por ejemplo, permite deshabilitar CSS personalizado en emails.

No confíes en los navegadores AI todavía. La prompt injection vía CSS demuestra que los agentes AI son aún más vulnerables que los humanos a este tipo de ataques.

La ironía más grande

Lo más perturbador de todo esto es que CSS fue diseñado para hacer la web más bonita. Nadie imaginó que un lenguage de estilos pudiera convertirse en un arma de robo de credenciales. Y mientras Gmail, Outlook y Yahoo parchean agujeros uno por uno, Heyes ya está pensando en los próximos vectores.

Como escribió en su paper: "He compartido mis notas de prueba para enfatizar lo útil que es compartir conocimiento humano, porque podemos hacer conexiones que una IA no puede hacer todavía."

La carrera entre atacantes y defensores nunca se detiene. Pero esta vez, el atacante no necesita malware, no necesita phishing, no necesita que hagas clic en nada. Solo necesitas abrir un email.

¿Usas Gmail, Outlook o Yahoo? Comparte esto con alguien que piense que su correo está seguro. Porque después de leer esto, ya sabemos que no lo está.