CSS Injection
Last updated
Last updated
Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE) Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)
Los selectores CSS están diseñados para coincidir con los valores de los atributos name
y value
de un elemento input
. Si el atributo de valor del elemento de entrada comienza con un carácter específico, se carga un recurso externo predefinido:
Sin embargo, este enfoque enfrenta una limitación al tratar con elementos de entrada ocultos (type="hidden"
) porque los elementos ocultos no cargan fondos.
Para eludir esta limitación, puedes dirigirte a un elemento hermano posterior utilizando el combinador de hermanos generales ~
. La regla CSS se aplica entonces a todos los hermanos que siguen al elemento de entrada oculto, lo que provoca que la imagen de fondo se cargue:
Un ejemplo práctico de la explotación de esta técnica se detalla en el fragmento de código proporcionado. Puedes verlo aquí.
Para que la técnica de inyección de CSS sea efectiva, deben cumplirse ciertas condiciones:
Longitud de la carga útil: El vector de inyección de CSS debe soportar cargas útiles suficientemente largas para acomodar los selectores elaborados.
Reevaluación de CSS: Debes tener la capacidad de enmarcar la página, lo cual es necesario para activar la reevaluación de CSS con cargas útiles recién generadas.
Recursos externos: La técnica asume la capacidad de usar imágenes alojadas externamente. Esto podría estar restringido por la Política de Seguridad de Contenido (CSP) del sitio.
Como se explica en esta publicación, es posible combinar los selectores :has
y :not
para identificar contenido incluso de elementos ciegos. Esto es muy útil cuando no tienes idea de qué hay dentro de la página web que carga la inyección de CSS.
También es posible usar esos selectores para extraer información de varios bloques del mismo tipo como en:
Combinar esto con la siguiente técnica de @import, es posible exfiltrar mucha info usando inyección CSS desde páginas ciegas con blind-css-exfiltration.
La técnica anterior tiene algunas desventajas, consulta los requisitos previos. Necesitas poder enviar múltiples enlaces a la víctima, o necesitas poder iframe la página vulnerable a la inyección CSS.
Sin embargo, hay otra técnica ingeniosa que utiliza CSS @import
para mejorar la calidad de la técnica.
Esto fue mostrado por primera vez por Pepe Vila y funciona así:
En lugar de cargar la misma página una y otra vez con decenas de diferentes payloads cada vez (como en la anterior), vamos a cargar la página solo una vez y solo con una importación al servidor del atacante (este es el payload a enviar a la víctima):
La importación va a recibir algún script CSS de los atacantes y el navegador lo cargará.
La primera parte del script CSS que el atacante enviará es otro @import
al servidor de los atacantes nuevamente.
El servidor de los atacantes no responderá a esta solicitud aún, ya que queremos filtrar algunos caracteres y luego responder a esta importación con la carga útil para filtrar los siguientes.
La segunda y mayor parte de la carga útil va a ser una carga útil de filtrado de selector de atributos
Esto enviará al servidor de los atacantes el primer carácter del secreto y el último.
Una vez que el servidor de los atacantes haya recibido el primer y último carácter del secreto, responderá a la importación solicitada en el paso 2.
La respuesta va a ser exactamente la misma que los pasos 2, 3 y 4, pero esta vez intentará encontrar el segundo carácter del secreto y luego el penúltimo.
El atacante seguirá ese bucle hasta que logre filtrar completamente el secreto.
Puedes encontrar el código original de Pepe Vila para explotar esto aquí o puedes encontrar casi el mismo código pero comentado aquí.
El script intentará descubrir 2 caracteres cada vez (desde el principio y desde el final) porque el selector de atributos permite hacer cosas como:
Esto permite que el script filtre el secreto más rápido.
A veces el script no detecta correctamente que el prefijo + sufijo descubierto ya es la bandera completa y continuará hacia adelante (en el prefijo) y hacia atrás (en el sufijo) y en algún momento se quedará colgado. No te preocupes, solo revisa la salida porque puedes ver la bandera allí.
Otras formas de acceder a partes del DOM con selectores CSS:
.class-to-search:nth-child(2)
: Esto buscará el segundo elemento con la clase "class-to-search" en el DOM.
:empty
selector: Usado por ejemplo en este informe:
Referencia: Ataque basado en CSS: Abusando de unicode-range de @font-face , PoC de XS-Search basado en errores por @terjanq
La intención general es usar una fuente personalizada de un endpoint controlado y asegurarse de que el texto (en este caso, 'A') se muestre con esta fuente solo si el recurso especificado (favicon.ico
) no se puede cargar.
Uso de Fuentes Personalizadas:
Se define una fuente personalizada utilizando la regla @font-face
dentro de una etiqueta <style>
en la sección <head>
.
La fuente se llama poc
y se obtiene de un endpoint externo (http://attacker.com/?leak
).
La propiedad unicode-range
se establece en U+0041
, apuntando al carácter Unicode específico 'A'.
Elemento Object con Texto de Respaldo:
Se crea un elemento <object>
con id="poc0"
en la sección <body>
. Este elemento intenta cargar un recurso desde http://192.168.0.1/favicon.ico
.
La font-family
para este elemento se establece en 'poc'
, como se define en la sección <style>
.
Si el recurso (favicon.ico
) no se carga, el contenido de respaldo (la letra 'A') dentro de la etiqueta <object>
se muestra.
El contenido de respaldo ('A') se renderizará utilizando la fuente personalizada poc
si el recurso externo no se puede cargar.
La :target
pseudo-clase se emplea para seleccionar un elemento dirigido por un fragmento de URL, como se especifica en la especificación de Selectores CSS Nivel 4. Es crucial entender que ::target-text
no coincide con ningún elemento a menos que el texto sea explícitamente dirigido por el fragmento.
Surge una preocupación de seguridad cuando los atacantes explotan la característica de fragmento de desplazamiento de texto, lo que les permite confirmar la presencia de texto específico en una página web al cargar un recurso desde su servidor a través de inyección HTML. El método implica inyectar una regla CSS como esta:
En tales escenarios, si el texto "Administrator" está presente en la página, el recurso target.png
se solicita al servidor, indicando la presencia del texto. Se puede ejecutar una instancia de este ataque a través de una URL especialmente diseñada que incrusta el CSS inyectado junto con un fragmento Scroll-to-text:
Aquí, el ataque manipula la inyección de HTML para transmitir el código CSS, apuntando al texto específico "Administrator" a través del fragmento Scroll-to-text (#:~:text=Administrator
). Si se encuentra el texto, se carga el recurso indicado, señalando inadvertidamente su presencia al atacante.
Para la mitigación, se deben tener en cuenta los siguientes puntos:
Coincidencia STTF Constrainada: El Fragmento Scroll-to-text (STTF) está diseñado para coincidir solo con palabras o frases, limitando así su capacidad para filtrar secretos o tokens arbitrarios.
Restricción a Contextos de Navegación de Nivel Superior: El STTF opera únicamente en contextos de navegación de nivel superior y no funciona dentro de iframes, haciendo que cualquier intento de explotación sea más notable para el usuario.
Necesidad de Activación del Usuario: El STTF requiere un gesto de activación del usuario para operar, lo que significa que las explotaciones son viables solo a través de navegaciones iniciadas por el usuario. Este requisito mitiga considerablemente el riesgo de que los ataques sean automatizados sin interacción del usuario. Sin embargo, el autor de la publicación del blog señala condiciones específicas y bypass (por ejemplo, ingeniería social, interacción con extensiones de navegador prevalentes) que podrían facilitar la automatización del ataque.
La conciencia de estos mecanismos y vulnerabilidades potenciales es clave para mantener la seguridad web y protegerse contra tácticas explotadoras.
Para más información, consulta el informe original: https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/
Puedes consultar un exploit usando esta técnica para un CTF aquí.
Puedes especificar fuentes externas para valores unicode específicos que solo serán recogidos si esos valores unicode están presentes en la página. Por ejemplo:
Cuando accedes a esta página, Chrome y Firefox obtienen "?A" y "?B" porque el nodo de texto de sensitive-information contiene los caracteres "A" y "B". Pero Chrome y Firefox no obtienen "?C" porque no contiene "C". Esto significa que hemos podido leer "A" y "B".
Referencia: Wykradanie danych w świetnym stylu – czyli jak wykorzystać CSS-y do ataków na webaplikację
La técnica descrita implica extraer texto de un nodo aprovechando las ligaduras de fuentes y monitoreando cambios en el ancho. El proceso implica varios pasos:
Creación de Fuentes Personalizadas:
Se crean fuentes SVG con glifos que tienen un atributo horiz-adv-x
, que establece un ancho grande para un glifo que representa una secuencia de dos caracteres.
Ejemplo de glifo SVG: <glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>
, donde "XY" denota una secuencia de dos caracteres.
Estas fuentes se convierten a formato woff usando fontforge.
Detección de Cambios de Ancho:
Se utiliza CSS para asegurar que el texto no se ajuste (white-space: nowrap
) y para personalizar el estilo de la barra de desplazamiento.
La aparición de una barra de desplazamiento horizontal, estilizada de manera distinta, actúa como un indicador (oráculo) de que una ligadura específica, y por lo tanto una secuencia de caracteres específica, está presente en el texto.
El CSS involucrado:
Proceso de Explotación:
Paso 1: Se crean fuentes para pares de caracteres con un ancho sustancial.
Paso 2: Se emplea un truco basado en la barra de desplazamiento para detectar cuándo se renderiza el glifo de gran ancho (ligadura para un par de caracteres), indicando la presencia de la secuencia de caracteres.
Paso 3: Al detectar una ligadura, se generan nuevos glifos que representan secuencias de tres caracteres, incorporando el par detectado y añadiendo un carácter anterior o posterior.
Paso 4: Se lleva a cabo la detección de la ligadura de tres caracteres.
Paso 5: El proceso se repite, revelando progresivamente todo el texto.
Optimización:
El método de inicialización actual usando <meta refresh=...
no es óptimo.
Un enfoque más eficiente podría involucrar el truco de CSS @import
, mejorando el rendimiento de la explotación.
Referencia: PoC usando Comic Sans por @Cgvwzq & @Terjanq
Este truco fue publicado en este hilo de Slackers. El charset utilizado en un nodo de texto puede ser filtrado usando las fuentes predeterminadas instaladas en el navegador: no se necesitan fuentes externas -o personalizadas-.
El concepto gira en torno a utilizar una animación para expandir gradualmente el ancho de un div
, permitiendo que un carácter a la vez transicione de la parte 'sufijo' del texto a la parte 'prefijo'. Este proceso divide efectivamente el texto en dos secciones:
Prefijo: La línea inicial.
Sufijo: La(s) línea(s) subsiguiente(s).
Las etapas de transición de los caracteres aparecerían de la siguiente manera:
C ADB
CA DB
CAD B
CADB
Durante esta transición, se emplea el truco de rango unicode para identificar cada nuevo carácter a medida que se une al prefijo. Esto se logra cambiando la fuente a Comic Sans, que es notablemente más alta que la fuente predeterminada, lo que provoca la aparición de una barra de desplazamiento vertical. La aparición de esta barra de desplazamiento revela indirectamente la presencia de un nuevo carácter en el prefijo.
Aunque este método permite la detección de caracteres únicos a medida que aparecen, no especifica qué carácter se repite, solo que ha ocurrido una repetición.
Básicamente, el rango unicode se utiliza para detectar un char, pero como no queremos cargar una fuente externa, necesitamos encontrar otra manera. Cuando el char es encontrado, se le asigna la fuente Comic Sans preinstalada, que hace que el char sea más grande y provoca una barra de desplazamiento que filtrará el char encontrado.
Revisa el código extraído de la PoC: