Leveraging CSS attribute selectors it – in theory – is possible to write a pure CSS keylogger. The selector below for example targets all whose last character is an
The theory goes that whenever a user presses the
a character inside an
inputs[type="password"], a request to
http://localhost:3000/a will be made, thus leaving a breadcrumb trail in some server log for an admin to snoop. Duplicate the selector above for all possible characters, and you’ll see the password appear in your server logs per keystroke.
I see many people on Twitter freaking out because of this (what if it’s in a WordPress Theme you’ve installed?!), yet I don’t really worry about it as in practice this doesn’t work at all (tested with latest Firefox and Chrome on macOS):
- It only works with an initial
value being set on an input, and not per key press nor after blurring the field.
- (Following up on 1) It will only catch the last character of a password when its being prefilled in the
- It’s not triggered for values that have been autocompleted by the browser’s credentials manager / your password manager of choice.
- It can’t handle repeat characters, as the browser won’t re-request the background image in that case.
Above that you can easily prevent it by setting the proper Content Security Policy.
As you were soldiers, carry on …