CSS Injection
Grupo de Seguridad Try Hard
Inyección de CSS
Selector de Atributos
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 se enfrenta a una limitación al tratar con elementos de entrada ocultos (type="hidden") porque los elementos ocultos no cargan fondos.
Bypass para Elementos Ocultos
Para evitar esta limitación, puedes apuntar a un elemento hermano posterior usando el combinador de hermanos generales ~. La regla CSS entonces se aplica a todos los hermanos que siguen al elemento de entrada oculto, haciendo que la imagen de fondo se cargue:
Un ejemplo práctico de explotar esta técnica se detalla en el fragmento de código proporcionado. Puedes verlo aquí.
Requisitos previos para la Inyección de CSS
Para que la técnica de Inyección de CSS sea efectiva, se deben cumplir ciertas condiciones:
Longitud de la carga útil: El vector de inyección de CSS debe admitir cargas útiles lo 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 desencadenar la reevaluación de CSS con cargas útiles recién generadas.
Recursos externos: La técnica asume la capacidad de utilizar imágenes alojadas externamente. Esto podría estar restringido por la Política de Seguridad de Contenido (CSP) del sitio.
Selector de Atributo Ciego
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 lo que hay dentro de la página web que carga la inyección de CSS.
También es posible utilizar esos selectores para extraer información de varios bloques del mismo tipo como en:
Combinando esto con la siguiente técnica @import, es posible exfiltrar mucha información utilizando inyección de CSS desde páginas ciegas con blind-css-exfiltration.
@import
La técnica anterior tiene algunas limitaciones, verifica los requisitos previos. Necesitas poder enviar múltiples enlaces a la víctima, o necesitas poder incrustar la página vulnerable a la inyección de CSS en un iframe.
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 de la siguiente manera:
En lugar de cargar la misma página una y otra vez con decenas de cargas diferentes cada vez (como en la técnica 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 un script CSS de los atacantes y el navegador lo cargará.
La primera parte del script CSS que enviará el atacante es otro
@importal servidor de los atacantes nuevamente.El servidor de los atacantes no responderá esta solicitud aún, ya que queremos filtrar algunos caracteres y luego responder a esta importación con el payload para filtrar los siguientes.
La segunda y más grande parte del payload va a ser un payload de filtración 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 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 la información secreta 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 verifica la salida porque puedes ver la bandera allí.
Otros selectores
Otras formas de acceder a partes del DOM con selectores CSS:
.clase-a-buscar:nth-child(2): Esto buscará el segundo elemento con la clase "clase-a-buscar" en el DOM.Selector
:empty: Utilizado por ejemplo en este informe:
XS-Search basado en errores
Referencia: Ataque basado en CSS: Abuso de unicode-range de @font-face, PoC de XS-Search basado en errores por @terjanq
La intención general es utilizar una fuente personalizada desde un punto final 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 Fuente Personalizada:
Una fuente personalizada se define utilizando la regla
@font-facedentro de una etiqueta<style>en la sección<head>.La fuente se llama
pocy se obtiene de un punto final externo (http://attacker.com/?leak).La propiedad
unicode-rangese establece enU+0041, apuntando al carácter Unicode específico 'A'.
Elemento de Objeto con Texto de Respaldo:
Se crea un elemento
<object>conid="poc0"en la sección<body>. Este elemento intenta cargar un recurso desdehttp://192.168.0.1/favicon.ico.El
font-familypara este elemento se establece en'poc', como se define en la sección<style>.Si el recurso (
favicon.ico) no se carga correctamente, se muestra el contenido de respaldo (la letra 'A') dentro de la etiqueta<object>.El contenido de respaldo ('A') se renderizará utilizando la fuente personalizada
pocsi el recurso externo no se puede cargar.
Estilizando Fragmento de Desplazamiento a Texto
La pseudo-clase :target 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 esté dirigido explícitamente por el fragmento.
Surge una preocupación de seguridad cuando los atacantes explotan la función de fragmento de Desplazamiento a texto, lo que les permite confirmar la presencia de un texto específico en una página web al cargar un recurso desde su servidor a través de una inyección HTML. El método implica inyectar una regla CSS como esta:
En tales escenarios, si el texto "Administrador" está presente en la página, se solicita el recurso target.png desde el servidor, lo que indica la presencia del texto. Una instancia de este ataque se puede ejecutar a través de una URL especialmente diseñada que incrusta el CSS inyectado junto con un fragmento de desplazamiento de texto:
Aquí, el ataque manipula la inyección de HTML para transmitir el código CSS, apuntando al texto específico "Administrador" a través del fragmento Scroll-to-text (#:~:text=Administrador). 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 Restringida: 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: STTF opera únicamente en contextos de navegación de nivel superior y no funciona dentro de iframes, lo que hace que cualquier intento de explotación sea más notable para el usuario.
Necesidad de Activación del Usuario: STTF requiere un gesto de activación del usuario para operar, lo que significa que las explotaciones son factibles solo a través de navegaciones iniciadas por el usuario. Este requisito mitiga considerablemente el riesgo de que los ataques se automatizen sin interacción del usuario. Sin embargo, el autor del blog señala condiciones y bypasses específicos (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 similares.
Para obtener 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 verificar un exploit que utiliza esta técnica para un CTF aquí.
@font-face / unicode-range
Puedes especificar fuentes externas para valores unicode específicos que solo se reunirán si esos valores unicode están presentes en la página. Por ejemplo:
Cuando accedes a esta página, Chrome y Firefox recuperan "?A" y "?B" porque el nodo de texto de información sensible contiene los caracteres "A" y "B". Pero Chrome y Firefox no recuperan "?C" porque no contiene "C". Esto significa que hemos podido leer "A" y "B".
Exfiltración de nodo de texto (I): ligaduras
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 explotando 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 luego se convierten al formato woff utilizando fontforge.
Detección de cambios de ancho:
Se utiliza CSS para asegurar que el texto no se envuelva (
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 distintiva, 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 ancho grande (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 agregando 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 actual de inicialización utilizando
<meta refresh=...no es óptimo.Un enfoque más eficiente podría implicar el truco
@importde CSS, mejorando el rendimiento del exploit.
Exfiltración de nodo de texto (II): filtrando el conjunto de caracteres con una fuente predeterminada (sin necesidad de activos externos)
Referencia: PoC usando Comic Sans por @Cgvwzq & @Terjanq
Este truco fue publicado en este hilo de Slackers. El conjunto de caracteres utilizado en un nodo de texto puede filtrarse utilizando las fuentes predeterminadas instaladas en el navegador: no se necesitan fuentes externas ni personalizadas.
El concepto gira en torno a utilizar una animación para expandir incrementalmente el ancho de un div, permitiendo que un carácter a la vez haga la transición 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 desencadena indirectamente 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 se ha producido una repetición.
Básicamente, el rango unicode se utiliza para detectar un carácter, pero como no queremos cargar una fuente externa, necesitamos encontrar otra forma. Cuando se encuentra el carácter, se le asigna la fuente Comic Sans preinstalada, lo que hace que el carácter sea más grande y activa una barra de desplazamiento que filtrará el carácter encontrado.
Verifica el código extraído del PoC:
Exfiltración de nodos de texto (III): filtrar el conjunto de caracteres con una fuente predeterminada al ocultar elementos (sin necesidad de activos externos)
Referencia: Esto se menciona como una solución no exitosa 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.
Exfiltración de nodos de texto (III): filtrar el conjunto de caracteres por temporización de caché (sin necesidad de activos externos)
Referencia: Esto se menciona como una solución no exitosa 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é, e incluso si no hay caché, hay un mecanismo de 304 not modified, por lo que la respuesta debería ser más rápida que otras cosas.
Sin embargo, si la diferencia de tiempo entre la respuesta en caché y 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 hacer pruebas, 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.
Exfiltración de nodos de texto (III): filtrar el conjunto de caracteres cronometrando la carga de cientos de "fuentes" locales (sin necesidad de activos externos)
Referencia: Esto se menciona como una solución no exitosa en este informe
En este caso, puedes indicar CSS para cargar cientos de fuentes falsas desde el mismo origen cuando se produce una coincidencia. De esta manera puedes medir el tiempo que lleva y averiguar si un carácter aparece o no con algo como:
Y el código del bot se ve así:
Entonces, 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 fuentes, se enviarán múltiples solicitudes para recuperar la fuente, lo que provocará una actividad continua en la red. 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 indicador para determinar si hay una coincidencia de fuentes.
Referencias
Try Hard Security Group
Última actualización
