Un moderno ataque de clickjacking con SVG para engañar a usuarios y sortear alertas

• Se presenta una nueva técnica de clickjacking con filtros SVG que expande el ataque tradicional de clic engañoso a un esquema interactivo más complejo
• Se verificó que los filtros SVG como feColorMatrix, feDisplacementMap también se pueden aplicar a iframes de origen cruzado, lo que habilita manipulación visual y extracción de datos
• La combinación de filtros permite leer píxeles, ejecutar operaciones lógicas y manipular la UI de forma condicional, facilitando clickjacking de varias etapas o ataques de inducción de entrada
• Como caso real, se reportó un ataque exitoso aprovechando una vulnerabilidad de Google Docs, y el investigador recibió una recompensa de $3133.70 de Google VRP
• Esta técnica revela una nueva superficie de ataque en el modelo de seguridad de los navegadores, mostrando que el uso lógico de filtros SVG puede evolucionar como una amenaza de seguridad

---

Resumen del clickjacking con SVG

• El clickjacking tradicional es una estructura de ataque simple donde se superpone un iframe para hacer que el usuario haga clic sin querer
• El clickjacking con SVG recién propuesto usa filtros SVG para permitir interacciones complejas y filtración de datos
• Filtros como feColorMatrix y feDisplacementMap se pueden aplicar también a documentos de origen cruzado, permitiendo manipulación visual de contenido externo

Componentes de filtros SVG

• Los elementos de filtro principales incluyen <feImage> , <feFlood> , <feOffset> , <feDisplacementMap> , <feGaussianBlur> , <feTile> , <feMorphology> , <feBlend> , <feComposite> , <feColorMatrix>
• Se combinan y transforman imágenes de entrada para crear nuevas imágenes, y pueden encadenarse entre sí
• Con estas combinaciones, un atacante puede implementar libremente efectos visuales, enmascarado y manipulación de color

Ejemplos de ataque

• Captcha falso (fake captcha): se usa feDisplacementMap para distorsionar texto y hacer que la víctima introduzca un código sensible
• Ocultación de texto gris (grey text hiding): con feComposite y feMorphology se eliminan mensajes de ayuda o errores en campos de entrada para que el usuario introduzca la contraseña indicada por el atacante
• Lectura de píxeles (pixel reading): detectar el color de píxeles específicos y controlar el comportamiento del filtro para implementar ataques reactivos dinámicos, como detectar clics de botón, estado de hover e interacción de entradas

Operaciones lógicas y ataques compuestos

• Combinando feBlend y feComposite se puede implementar lógica de puertas AND, OR, XOR, NOT
• Esto permite construir un circuito lógico completo dentro de filtros SVG, y automatizar escenarios de clickjacking de múltiples pasos
• En el caso de ataque a la app «Securify», se creó una secuencia que manipula, paso a paso y de forma lógica, la apertura de cuadros de diálogo, clics en casillas y clics en botones para engañar al usuario

Caso real: vulnerabilidad de Google Docs

• Tras pulsar el botón Generate Document de Google Docs, se detecta y manipula el popup y el campo de entrada con lógica de filtros SVG
• Se detectan en tiempo real el estado de foco del campo, texto gris y pantallas de carga para controlar el flujo del ataque
• Este ataque se reportó a Google y se otorgó una recompensa de bugs de $3133.70

Aplicaciones con códigos QR

• Dentro de un filtro SVG se puede implementar una lógica de generación de códigos QR para codificar datos de píxeles como URL y mostrarlos en formato QR
• Cuando el usuario escanea el QR, se envían datos al servidor controlado por el atacante
• Se utiliza feDisplacementMap y la corrección de errores Reed–Solomon para generar códigos QR escaneables

Posibilidades de uso adicional

• Lectura de texto, extracción de datos basada en clics, inserción de un cursor de ratón falso, y muchas otras aplicaciones de ataque
• Es posible montar ataques con solo CSS/SVG, sin JavaScript, lo que sugiere rutas de evasión de CSP

Relevancia de la investigación

• El clickjacking de operación lógica con filtros SVG es una técnica nueva que no se cubría en estudios anteriores
• Investigaciones pasadas mencionaban SVG solo como medio visual de ocultamiento; este trabajo demuestra ejecución lógica y control de interacción
• El investigador lo presenta como una nueva clase de vulnerabilidad y resalta la necesidad de revisar el marco de seguridad de los navegadores

Conclusión

• Esta investigación es considerada el primer caso de ataque de seguridad que usa filtros SVG como un lenguaje de programación
• El autor planea presentarlo a fines de 2025 en 39c39 y Disobey 2026
• La publicación se redactó con 42 kB de HTML/CSS/SVG, sin imágenes ni JavaScript, mostrando la creatividad de una investigación de seguridad experimental

[GN⁺]

Comentarios en Hacker News

• Si los desarrolladores configuran correctamente el header X-Frame-Options, este problema se resuelve
  Pero siendo realistas, parece más probable que la respuesta sea perseguir problemas de seguridad borrando la mitad de la especificación de SVG en los navegadores

  • No está resuelto por completo. Algunas aplicaciones, como Google Docs, necesitan framing
    Además, este ataque también es posible en sitios donde se puede hacer inyección de HTML, no solo con frames
  • Hay demasiadas minas terrestres de seguridad en SVG. Sobre todo cuando no es confiable, como en el caso de SVG proporcionado por usuarios, lo más simple es desactivarlo por completo

• Yo ya tengo SVG desactivado por razones de seguridad
  Pero últimamente pienso que quizá también habría que desactivar hasta CSS
  Ojalá CSS se hubiera quedado como algo para decorar texto, pero ahora se ha convertido en algo parecido a un lenguaje de programación que hackers o anunciantes pueden abusar fácilmente

  • Coincido con la idea de “ojalá CSS se hubiera mantenido simple”, pero en realidad este tipo de ataque era mucho más fácil a fines de los años 2000
    Hoy es casi imposible
  • Yo creo que, en vez de romper el navegador para endurecer la seguridad, es mejor mantener los datos sensibles fuera del navegador
  • El núcleo del problema no es CSS sino los iFrame. Han sido una fuente de vulnerabilidades de seguridad desde los primeros días del navegador
  • Me pregunto si hay otras razones de seguridad aparte de este demo. En la mayoría de las plataformas este ataque no funciona
  • Eso es una reacción exagerada. La probabilidad de caer en un ataque así es muy baja, y tampoco puede romper el sandbox ni las cookies de sesión

• Me confundió por completo el ejemplo de “detectar si un píxel es negro puro para activar o desactivar un filtro”
  No entiendo por qué HTML/CSS se volvió tan complejo
  Hay un <checkbox> oculto y un <label>; al hacer clic se alterna el checkbox y, solo con CSS, el estilo cambia según el estado
  SVG en realidad no dibuja nada, solo define filtros
  También es rara la estructura en la que se usan dos <feTile> para definir por separado el área en mosaico y el área de salida
  ¿Y qué se supone que son elementos como <fake-frame> o <art-frame>?

  • A mí esta estructura me parece bastante genial. Se puede crear contenido interactivo sin JavaScript
    Que un clic en <label> alterne el checkbox es comportamiento básico de HTML
    Usa el selector :has() de CSS para detectar el estado
    <feTile> es un solo elemento de filtro, usado para hacer tiling o recortar la imagen de entrada
    <fake-frame> y <art-frame> son custom elements definidos por el autor
    Lo explicó en este post del blog
  • En realidad, la mayoría de estas funciones no son “modernas”, sino cosas que existen desde los 90
    Que un clic en <label> mueva el foco sigue la tradición de las interfaces de escritorio
    Cambiar estilos según el estado del checkbox también existía desde la época de Firefox 1
    Incrustar filtros SVG directamente en HTML también es una función antigua
    O sea, esto no es un problema del HTML nuevo, sino una combinación de funciones viejas

• Este demo me recordó los viejos hacks de Flash Player
  Se parece a la forma en que engañaban a los usuarios para permitir acceso al almacenamiento del sistema
  Las gráficas vectoriales de verdad parecen incapaces de controlarse a sí mismas

• El SVG adder parece una obra de arte. Está increíble

  • Fue un demo muy potente. Hoy aprendí por primera vez que, para la completitud de Turing, no basta con la completitud funcional: también se necesita almacenamiento y acceso aleatorio
    Lo vi referenciado en este post de Stack Overflow

• En mi Chrome de Android —más exactamente, el navegador Kiwi— se ve roto o extraño, quizá por el modo oscuro
  Me pregunto si a alguien más le pasa

  • En Firefox tuve que desactivar Dark Reader para que el ejemplo se viera bien
  • El ejemplo relacionado con QR se rompe cuando el zoom no está al 100%

• Este artículo me recordó este viejo demo de cálculo con CSS

• Es un trabajo realmente impresionante. No sé cómo debería resolverse, pero hay que corregirlo pronto

• Fue un post demasiado bueno. Disfruté leerlo de principio a fin