La bomba CSS en tu bandeja de entrada: cómo el código aparentemente inocente puede comprometer tus cuentas
Gareth Heyes, investigador de seguridad en PortSwigger, ha revelado técnicas avanzadas que permiten a atacantes saltar las protecciones de sanitización CSS en clientes de correo web como Outlook, Gmail, Fastmail, ProtonMail y Yahoo Mail. Su investigación, publicada el 6 de agosto de 2026, muestra cómo el código CSS malicioso puede robar tokens de autenticación, tomar control de cuentas e incluso capturar contraseñas en tiempo real sin necesidad de JavaScript.
Los clientes de correo web enfrentan un problema fundamental: deben renderizar HTML y CSS no confiable en una interfaz de usuario confiable. Para ello utilizan sanitizadores que intentan filtrar código peligroso, pero las discrepancias entre lo que el sanitizador considera seguro y lo que el navegador realmente renderiza crean vulnerabilidades críticas.
¿Cómo funcionan los ataques con CSS?
Heyes identificó múltiples vectores de ataque que explotan debilidades en la sanitización CSS:
👥 ¿Quieres ir más allá de la noticia?
En nuestra comunidad discutimos las tendencias, compartimos oportunidades y nos ayudamos entre emprendedores. Sin humo, solo acción.
👥 Unirme a la comunidadAbuso de etiquetas HTML para acciones de UI
Las etiquetas <label> con atributo for pueden apuntar a elementos de formulario con ID específicos, heredando sus acciones de clic. Heyes descubrió que al menos tres clientes de correo web son vulnerables a esta técnica, incluyendo Outlook, donde un atacante puede controlar la interfaz de usuario desde un mensaje de email.
Inyección indirecta de prompts en navegadores AI
Utilizando elementos pseudo :before y :after con opacidad, los atacantes pueden mostrar contenido diferente a la víctima y al navegador AI. En un experimento con OpenAI Atlas, Heyes demostró cómo engañar al LLM para que ejecute acciones maliciosas cuando el usuario solicita una traducción, abriendo múltiples pestañas y exfiltrando información sensible.
Robo de tokens desde emails en borrador
Cuando un usuario copia y pega contenido en un borrador de email, los navegadores procesan el HTML y CSS del portapapeles de manera diferente. Firefox permite etiquetas <style> en línea y solicitudes de imágenes de fondo, lo que posibilita el robo de tokens de autenticación de 12 caracteres hexadecimales de servicios como Medium mediante selectores de atributos anidados.
Bypass de sanitización CSS en servicios populares
La investigación reveló vulnerabilidades específicas en cada plataforma:
Fastmail: Heyes descubrió que usando escapes hexadecimales (\5c) se puede engañar al sanitizador para que piense que una URL es relativa cuando en realidad apunta a dominios permitidos en la política de seguridad de contenido (CSP). Esto permite rastrear cuándo se visualiza un email y potencialmente capturar pulsaciones de teclas.
ProtonMail: A pesar de que su documentación afirma que "las imágenes remotas no pueden determinar quién, cuándo o dónde alguien abre un email", Heyes encontró una técnica para mostrar la dirección IP del usuario de forma predeterminada mediante comentarios CSS malformados.
Gmail: La función image-set() con variables CSS no definidas permite hacer solicitudes externas incluso cuando el proxy de imágenes debería bloquearlas. Esta vulnerabilidad fue explotada junto con Pete Hendy para robar tokens de Slack mediante inyección indirecta de prompts en Cowork, la herramienta de automatización de email de OpenAI.
CSS mutation: cuando el navegador transforma código seguro en peligroso
El CSS Object Model (CSSOM) es la representación en memoria del navegador de todas las reglas CSS. Algunos clientes de correo web como Fastmail lo usan para analizar y filtrar hojas de estilo, pero el navegador puede realizar transformaciones cuando las propiedades son leídas, mutando CSS perfectamente seguro en código malicioso.
Heyes demostró cómo secuencias de escape hexadecimales como \7d\2a se convierten en }* cuando Chrome las decodifica, permitiendo inyectar selectores CSS arbitrarios que rompen los límites de confianza.
Keyloggers CSS en tiempo real
Contrario a las técnicas públicas conocidas que usan selectores :checked y requieren frameworks JavaScript, Heyes desarrolló keyloggers funcionales que funcionan incluso con DOMPurify y filtros CSS estrictos:
- Keylogger con diccionario: Asigna una animación por letra y exfiltra palabras completas cuando se presionan las teclas correspondientes
- Keylogger en tiempo real para Firefox: Aprovecha un comportamiento del navegador que reinicia el temporizador del elemento
<select>cuando se mueve fuera de pantalla - Keylogger completo para Outlook: Combina bypass de sanitización CSS con gadgets CSS para crear una pantalla de inicio de sesión falsa que captura contraseñas en tiempo real
¿Qué significa esto para tu startup?
Estas vulnerabilidades no son solo problemas teóricos de seguridad informática. Tienen implicaciones prácticas directas para cualquier empresa que:
- Utilice emails para comunicación con clientes o proveedores
- Maneje información sensible a través de correos electrónicos
- Confíe en tokens de autenticación enviados por email
- Use clientes de correo web para acceder a cuentas corporativas
Acción 1: Revisa tus políticas de seguridad de email
Si tu startup maneja datos sensibles o accede a servicios críticos desde clientes de correo web:
- Implementa autenticación multifactor (MFA) en todas las cuentas críticas
- Evita depender exclusivamente de tokens enviados por email para autenticación
- Considera usar clientes de correo nativos en lugar de interfaces web cuando sea posible
- Educa a tu equipo sobre los riesgos de copiar y pegar contenido de fuentes no confiables en emails
Acción 2: Fortalece tus defensas técnicas
Para desarrolladores que construyen aplicaciones que interactúan con emails:
- Aísla los mensajes de email usando iframes sandboxed para restringir la capacidad de romper límites de confianza
- Bloquea la capacidad de hacer solicitudes de imagen desde un mensaje de email
- Evita usar dominios "allow listed" que un atacante pueda controlar
- Bloquea menús
<select>en tu sanitizador HTML - Heyes demostró que aún es posible construir keyloggers con HTML/CSS permitido - Revisa cuidadosamente los atributos personalizados y verifica la presencia de gadgets HTML/CSS
El futuro de los ataques CSS
La investigación de Heyes apunta hacia técnicas aún más avanzadas:
- Keyloggers solo con HTML: Utilizando el nuevo elemento
selectedcontentpropuesto por Chrome combinado con imágenes lazy-loaded - Keyloggers en tiempo real para Chrome: Aprovechando interest invokers del Popover API para crear keyloggers completamente funcionales
Estas técnicas representan un desafío fundamental: incluso las protecciones más avanzadas pueden ser vulneradas cuando existe una discrepancia entre lo que el sanitizador interpreta y lo que el navegador ejecuta.
Defensas recomendadas por los investigadores
Heyes y su equipo en PortSwigger recomiendan:
- Listas blancas estrictas de caracteres al validar palabras clave y nombres
- Bloquear selectores peligrosos como
:has,:checked,:focusy:not - Siempre usar un proxy de imágenes para restringir solicitudes de recursos
- Investigar tu aplicación en busca de gadgets que puedan llevar a escapar restricciones del sanitizador
La lección más importante: La seguridad del email no es solo un problema de filtrado de spam o phishing tradicional. Las vulnerabilidades en la sanitización CSS representan una amenaza sofisticada que requiere atención específica y medidas de protección proactivas.
Fuentes
👥 ¿Quieres ir más allá de la noticia?
En nuestra comunidad discutimos las tendencias, compartimos oportunidades y nos ayudamos entre emprendedores. Sin humo, solo acción.
👥 Unirme a la comunidad
