Investigadores de seguridad han publicado un análisis detallado sobre una evolución peligrosa en los ataques de “secuestro de clics” (Clickjacking). La técnica, denominada SVG Clickjacking, aprovecha la flexibilidad de los Gráficos Vectoriales Escalables (SVG) para eludir las detecciones visuales y engañar a los usuarios con una precisión milimétrica.
¿Cuál es la novedad?
El Clickjacking tradicional suele ser “tosco”: los atacantes colocan una ventana invisible (un iframe rectangular) sobre un botón trampa. La nueva variante con SVG cambia las reglas del juego. Gracias a que los SVG no están limitados a formas rectangulares, los atacantes pueden dibujar máscaras complejas y formas irregulares que se ajustan perfectamente a los elementos de la interfaz de la víctima.
¿Cómo funciona el ataque?
- La Capa Invisible: El atacante crea un archivo SVG que contiene elementos interactivos o incrusta contenido malicioso usando la etiqueta <foreignObject>.
- Geometría Perfecta: A diferencia de una caja CSS normal, el SVG puede definir un path (camino) que siga, por ejemplo, el contorno exacto de un botón de “Play” o “Login”.
- El Engaño: El usuario cree estar haciendo clic en un elemento seguro de una página web (como cerrar un anuncio o jugar un video), pero gracias a la máscara SVG, el clic atraviesa esa capa y aterriza en un botón oculto debajo (como “Transferir Dinero” o “Autorizar Aplicación”).
Este método hace que el ataque sea mucho más difícil de detectar para los sistemas anti-fraude automatizados que buscan iframes rectangulares superpuestos.
El peligro de foreignObject
La etiqueta <foreignObject> dentro de un SVG es una característica poderosa pero peligrosa. Permite incrustar HTML estándar (como un formulario o un iframe) dentro de una imagen vectorial. Esto significa que un archivo que parece ser un simple icono .svg puede contener una página web funcional y maliciosa en su interior.
¿Por qué fallan las defensas visuales?
Algunos navegadores y extensiones intentan detectar clickjacking analizando si hay elementos invisibles (opacity: 0) cubriendo la pantalla. Sin embargo, los SVG pueden usar propiedades como pointer-events, clip-path o máscaras de transparencia alfa que no siempre disparan estas alertas, permitiendo que el clic “pase” o sea “capturado” según convenga al atacante.
Recomendaciones
- Cabeceras de Seguridad (Headers): Es obligatorio implementar Content-Security-Policy: frame-ancestors ‘self’ o la clásica X-Frame-Options: DENY. Esto impide que tu web sea cargada dentro del SVG o Iframe de un atacante, anulando el ataque de raíz.
- Cookies SameSite: Configura tus cookies de sesión con el atributo SameSite=Strict. Así, incluso si el usuario hace clic en el botón trampa, la acción no se procesará porque la cookie de sesión no se enviará en ese contexto cruzado.
- Sanitización de SVGs: Si permites que tus usuarios suban imágenes SVG a tu plataforma, nunca las sirvas directamente. Debes “sanitizarlas” (limpiarlas) para eliminar etiquetas <script>, <foreignObject> y manejadores de eventos como onclick.
