"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Crea un keylogger con CSS

Recientemente se está hablando mucho de lo seguro que es usar el código CSS de terceros, porque aunque el CSS parece inofensivo ya hay quien ha inventado técnicas por ejemplo para reventar contraseñas usando las hojas de estilos.

Me ha sorprendido que además las técnicas que usan no son nada complejas, y creo que merece la pena explicar como lo están haciendo.

Podemos encontrar un ejemplo de esto en este link, si lo abrimos encontramos un proyecto totalmente funcional para hacer el keylogger, usando una extensión de chrome, un servidor express (para hacer una API) y CSS.

¿Cómo funciona?

No es nada complejo,en primer lugar para que esta brecha funcione necesitamos que la página este usando componentes reactivos, por ejemplo una página que base su frontal en React.

La razón de esto es que los navegadores no almacenan el valor que vamos introduciendo en un input, por lo que necesitamos de elementos reactivos que sincronicen esos valores en caliente para que el ataque funcione.

Hablaremos un poco más de porque debe ser reactivo una vez visto el código, la regla de CSS básica que usan para capturar la información es esta.

Aunque parezca un inofensiva petición de un recurso encierra mucho más, lo que le está diciendo es, cuando dentro de un input que sea del tipo password el contenido termine con la letra ‘a’ me haces una petición a esta dirección para obtener una imagen.

Con esto aun no tenemos nada, pero, ¿y si inyectamos todo este código?

Ahora cambia el cuento, tenemos capturados todos los posibles caracteres y cada uno esta haciendo una petición a una dirección distinta con lo cual si tenemos una API Rest levantada con todos estos endpoints, tenemos una especie de teclado virtual, solo que en vez de ejecutarse por pulsaciones se ejecuta por peticiones, y este código CSS de arriba es la ‘mano’ que escribe en él replicando lo que nosotros escribimos en la web.

Un keylogger perfectamente funcional, que pesa unos pocos kb y que puede ser inyectado en cualquier página web.

¿Cómo podemos protegernos?

Actualmente no podemos, los navegadores no han limitado nada en este sentido y las librerías de componentes que podrían ser explotadas para usar este método tampoco.

La única precaución que tenemos que tener es comprobar el código CSS que introducimos en nuestras páginas, en esta entrada se habla sobre los riesgos de usar código de terceros en nuestros desarrollos, y aunque todos tenemos presente que con código javascript pueden hacer prácticamente de todo en nuestra web, también se menciona que con el CSS se pueden hacer cosas.

Si sospechamos que una web puede haber sido afectada por este ataque es sencillo verlo si sabes donde, como tecla que pulsemos equivale a una llamada a una dirección web, siendo además distinta según cual pulsemos, simplemente con mirar en el inspector de nuestro navegador las peticiones que se hacen podremos ver si estamos siendo victimas de este keylogger.

¿Por que necesita de reactividad?

Si entramos en el proyecto arriba mencionado el autor del keylogger menciona que es necesario que la página use componentes reactivos y además pone el caso de la web de Instagram (que tiene React).

Los componentes reactivos vuelven a ser renderizados cuando se producen cambios, un cambio como que varíe el valor de una propiedad.

Si todo ese código CSS se ejecutara en una web que no fuera reactiva simplemente al renderizar el navegador miraría si se cumplen las reglas, el campo password estaría vacío y por lo tanto no ejecutaría ninguna llamada.

Aunque nos pusiéramos en el peor de los casos, de que nuestra contraseña estuviera escrita en ese campo, el código se ejecutaría al renderizar y lanzaría una llamada, como mucho serviría para saber cual es la última letra de nuestra contraseña.

Con la reactividad es distinto:

  • Entra y no hay nada escrito, por lo que no se ejecuta ninguna llamada
  • Pulsamos una tecla y escribimos un caracter, como es reactivo percibe que la propiedad cambia y vuelve a renderizar, ahora al entrar por el CSS si que ejecuta la llamada.
  • Volvemos a escribir, vuelve a cambiar el valor, vuelve a renderizar y vuelve a hacer la petición correspondiente.

Del otro lado viendo por donde entran las peticiones pueden saber que estas escribiendo.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)