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:
Referencia: Esto se menciona como una solución fallida en este informe
Este caso es muy similar al anterior, sin embargo, en este caso el objetivo de hacer que caracteres específicos sean más grandes que otros es ocultar algo como un botón para que no sea presionado por el bot o una imagen que no se cargará. Así que podríamos medir la acción (o la falta de acción) y saber si un carácter específico está presente dentro del texto.
Referencia: Esto se menciona como una solución fallida en este informe
En este caso, podríamos intentar filtrar si un carácter está en el texto cargando una fuente falsa desde el mismo origen:
Si hay una coincidencia, la fuente se cargará desde /static/bootstrap.min.css?q=1. Aunque no se cargará con éxito, el navegador debería almacenarla en caché, y incluso si no hay caché, hay un mecanismo de 304 no modificado, por lo que la respuesta debería ser más rápida que otras cosas.
Sin embargo, si la diferencia de tiempo de la respuesta en caché con respecto a la que no está en caché no es lo suficientemente grande, esto no será útil. Por ejemplo, el autor mencionó: Sin embargo, después de probar, descubrí que el primer problema es que la velocidad no es muy diferente, y el segundo problema es que el bot utiliza la bandera disk-cache-size=1, lo cual es realmente considerado.
Referencia: Esto se menciona como una solución fallida en este informe
En este caso, puedes indicar CSS para cargar cientos de fuentes falsas desde el mismo origen cuando ocurre una coincidencia. De esta manera, puedes medir el tiempo que toma y averiguar si un carácter aparece o no con algo como:
Y el código del bot se ve así:
Así que, si la fuente no coincide, se espera que el tiempo de respuesta al visitar el bot sea de aproximadamente 30 segundos. Sin embargo, si hay una coincidencia de fuente, se enviarán múltiples solicitudes para recuperar la fuente, lo que causará que la red tenga actividad continua. Como resultado, tomará más tiempo satisfacer la condición de parada y recibir la respuesta. Por lo tanto, el tiempo de respuesta se puede utilizar como un indicador para determinar si hay una coincidencia de fuente.
Learn & practice AWS Hacking:HackTricks Training AWS Red Team Expert (ARTE) Learn & practice GCP Hacking: HackTricks Training GCP Red Team Expert (GRTE)
