为了实现高效开发,大多数时候会选择别人实现好的库/组件引用到自己的项目中,但是这样真的安全吗?
大多数web开发者认为只要不使用别人的 ,安全就会有保证。Too young, too naive,殊不知“黑客”已经开始在 上做手脚了。
在浏览器设置中用户可以禁用 ,但是 却是没有办法禁用的。
首先聊一聊使用第三方资源,能够造成的危害。
图片
引用第三方图片资源,可能会出现2个问题:
图片资源失效
图片资源被替换
上图展示了使用第三方图片可能带来的后果,即使图片资源失效、或者图片资源被替换,只会影响图片自身的状态而不会影响页面其他部分。
脚本
脚本的作用范围就不是图片能够比拟的了,脚本能够随意控制整个页面。
读取、篡改页面内容
监控用户行为
使用用户浏览器的算力进行挖矿
使用用户 做请求,并转发响应
读取、篡改浏览器
More
注:因为 是持久存储, 所以如果 被更改,即使删除了脚本,这些更改仍然不可逆。
只有在信任第三方的情况下,才会选择加载第三方脚本,来保证用户访问的安全性。
下面来介绍本文的重头戏 ---第三方 CSS。
CSS
CSS在作用范围的方面更加接近于JS,因为它同样能在整个页面生效,也能完成部分JS的操作。
CSS能在以下几个方面对页面进行操作:
增、删和改页面内容
根据页面内容发起请求
响应用户交互
与JS相比,CSS不能做到的是修改 ,也不能用来挖矿。
键盘记录器
键盘记录器,指的是页面会记录用户的输入。目前这种行为只存在于使用React/类React框架的页面。
如果密码输入框,输入以 结尾的密码,就会发起一个 请求。浏览器默认不会记住 输入框的输入,这也就是为什么说这种行为只存在于使用React/类React框架的页面中,下面截取两个例子。
如果没有使用React/类React框架,输入框的内容不会在 标签中显示 属性。
某图片网站使用的是React框架,会把输入框的内容同步显示在 的 属性中。这样CSS属性选择器 就能检测用户输入,从而导致用户输入被第三方捕获。
有没有通过这个例子,觉得CSS比你想象的强大的多,失控的CSS也能对页面造成很大的危害。
隐藏内容
通过一些技巧,将真正的页面内容不展示给用户。
上例将真正的主体内容隐藏,展示给用户HTTP 500错误,让用户误以为是网站服务器出现了问题。
同样可以展示任意HTTP错误给用户,网页的常见错误有以下几种:
HTTP 400: 请求无效
HTTP 403: 禁止访问
HTTP 404: 未找到页面
HTTP 500: 内部服务器错误
增加内容
为价格样式,增加 / 这样的伪元素,然后伪元素的 属性中增加任一位数字,商品价格就增加了约10倍。
商品涨价了诶,估计连卖家都不知道。遇到这种情况用户一般都不会产生购买欲望了。
移动内容
通过 将结算按钮的透明度设置为100%隐藏元素,让用户不可见,但是依然占据空间。然后再通过一个绝对定位,这样结算按钮本来占据的空间就脱离普通流,并且将按钮移动至用户点击不到的位置;同样上述的CSS也可以使用简单的 去隐藏按钮。
遇到上述情况,用户根本没办法完成购买行为,这种情况对电商网站很伤,导致“只能看不能买”。
监控用户交互
通过上面的代码,可以用来检测用户在登录按钮的交互状态,是 还是 (点击),不同的状态会发送不同的请求。
如果页面中适量增加类似 代码,可以用来做用户画像分析。
当然也可以用来做简单链接埋点,记录某个链接的点击。
读取页面内容
伪造一种字体 ,如果页面中有在 范围内的字符就会发送设置好的请求,我们这里例子是字符 。
注: 中的请求会在开发控制台的Network->font类型中看到。
也许你觉得只能检测页面中的单个字符作用很小,那我给你介绍一个css的新属性 ,通过这个属性我们可以设置字符为连字效果。
但是目前只有OpenType字体支持连字效果,不同的OpenType字体连字显示的效果也不一致。
启用连字效果
全部都设置完成之后,我们就可以检测特定的连字字符。比如ff连字的unicode码就是 。
查询unicode码对应哪些字符,可以通过Unicode® character table(https://unicode-table.com/en/) 进行查询。
总结
通过以上的几个CSS的例子,你是不是觉得CSS也同样强大,不授信的第三方 CSS也不可轻易采用。
总结一下,自己的CSS,还得自己写。。。
领取专属 10元无门槛券
私享最新 技术干货