乐趣区

第三方CSS安全吗?

原文:https://jakearchibald.com/201… 翻译:疯狂的技术宅

本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章

前一段时间,有很多关于用 CSS 构建的“键盘记录器”的讨论(源代码见:https://github.com/maxchehab/…)。
有些人要求浏览器“修复”它。另有一些人挖掘得更深一些,发现它只影响使用 React 及类似框架编写的网站,并为此指责 React。不过真正的问题在于第三方内容是不是“安全的”。
下面我们逐一分析这些第三方内容。
第三方图片
<img src=”https://example.com/kitten.jpg”>
如果因为我信任 example.com,就在自己的代码中包含上述内容。那么 他们可能会删除资源,从而给我返回一个 404,使我的网站看起来支离破碎,从而辜负了这种信任。同时他们也有可能会用一些不恰当的内容取代原来的图片。
不过图像的影响仅限于元素本身的内容框。我可以向自己的用户解释“这是来自 example.com 的内容,如果它变冒犯了你,那是他们的错,可别来找我”,并寄希望于用户们能够相信我。但是这种事肯定不会影响我数据库中密码字段之类的东西。
第三方脚本
<script src=”https://example.com/script.js”></script>
与图片相比,第三方脚本有更多的控制权。如果我的代码中包含上述内容,就会给 example.com 完全控制自己的网站的机会。他们能:

读取 / 更改页面内容。
监控用户交互的每一个步骤。
运行计算量很大的代码(比如用你的浏览器挖矿)。
盗取用户的 cookie 向我的来源发出请求,并转发响应数据。
读取 / 更改原始存储。
几乎可以做任何他们想做的事。

“原始存储”位非常重要。如果脚本影响了 IndexedDB 或缓存存储 API,即使你把脚本删掉,攻击也可能会仍然继续。
如果你在自己的代码中引用了来自其他来源的脚本,那么必须绝对信任它们,并保证其安全性。
如果遇到恶意脚本,则应使用 Clear-Site-Data 标头清除所有站点数据。
第三方 CSS
<link rel=”stylesheet” href=”https://example.com/style.css”>
CSS 的作用更接近于脚本而不是图像。和脚本一样,它适用于整个页面。它可以:

删除 / 添加 / 修改页面内容。
根据页面内容发出请求。
对许多用户交互作出响应。

CSS 不能修改原始存储,你不能用 CSS 写一个挖矿程序(也有可能,或许我还不知道),但恶意 CSS 仍然可以造成很大的破坏。
键盘记录器
咱们从最开始的那个问题开始
input[type=”password”][value$=”p”] {
background: url(‘/password?p’);
}
如果输入的 value 属性以 p 结尾,上面的代码将触发对 /password?p 的请求。对每个字符都会执行此操作,这样你会获得大量键盘输入的数据。
默认情况下,浏览器不会将用户输入的值存储在 value 属性中,因此攻击往往在同步这些值的内容时发生,例如 React。
为了缓解这种情况,React 可以使用另一种同步密码字段的方法,或者浏览器可以限制与密码字段的 value 属性匹配的选择器,但这仅仅是一种虚假的安全感。你只不过是解决了一个特定的问题,但其他情况下一切照旧。
如果 React 切换到使用 data-value 属性,则上述手段将失败。如果站点将输入更改为 type =”text”,那么用户可以看到他们正在输入的内容,则这种手段失败。如果站点创建 <better-password-input> 并将值作为属性公开,同样上述手段失败。
此外,还有许多基于 CSS 的攻击:
消失的内容
body {
display: none;
}

html::after {
content: ‘HTTP 500 Server Error’;
}
这是一个极端的例子,但想象一下,如果第三方代码为你的一小部分用户做了这种事,会出现什么样的后果:将会侵蚀掉用户对你的信任,同时很难排查问题到底出在何处。
更加腹黑的黑客可能会偶尔删除“购买”按钮,或着重新排列内容中的段落。
添加内容
.price-value::before {
content: ‘1’;
}
哎呀,你这么快就涨价了!
移除内容
delete-everything-button {
opacity: 0;
position: absolute;
top: 500px;
left: 300px;
}
把一个有“删库跑路”功能的按钮设为不可看,然后再把它放在用户可能会点击的地方。
值得庆幸的是,如果按钮执行的是后果非常严重的操作,该网站可能会首先显示确认对话框。没关系,只需使用更多的 CSS 来诱骗用户单击“是的我确定!”按钮而不是“哦天呐!不是!”按钮。
想象一下,如果浏览器确实试图消除“键盘记录”这种小伎俩的影响。攻击者还可以在页面上放一个非密码文本输入框(可能是搜索字段)并将其覆盖在密码输入框之上,呵呵,现在他们又回来了。
读取属性
你担心的可不仅仅是密码。一些私有内容可能会保存在属性中:
<input type=”hidden” name=”csrf” value=”1687594325″>
<img src=”/avatars/samanthasmith83.jpg”>
<iframe src=”//cool-maps-service/show?st-pancras-london”></iframe>
<img src=”/gender-icons/female.png”>
<div class=”banner users-birthday-today”></div>
所有这些都可以被 CSS 选择器设为目标,并且可以把结果发到某个服务器上。
监控互动
.login-button:hover {
background: url(‘/login-button-hover’);
}

.login-button:active {
background: url(‘/login-button-active’);
}
可以将 hover 和 active 等动作发送回服务器。适当的使用 CSS,你可以很好地了解用户想要干什么。
读取文本
@font-face {
font-family: blah;
src: url(‘/page-contains-q’) format(‘woff’);
unicode-range: U+71;
}

html {
font-family: blah, sans-serif;
}
在这种情况下,如果页面包含 q,将发送请求。你可以为不同的文字创建大量的这种请求,并可以定位特定的元素。字体还可以包含连字,因此还可以检测字符序列。你甚至可以将字体技巧与滚动条检测相结合,从而能推断出更多相关内容的信息。
结论:第三方内容并不安全
这些只是我所知道的一些技巧,我相信还会有更多类似的小技巧。
第三方内容在其沙箱中具有很高的影响力。虽然图像或沙盒 iframe 有着非常小的沙箱,但脚本和样式的作用范围却影响你的整个页面,甚至是整个站点。
如果你担心用户会欺骗你的网站去加载第三方资源,可以使用 CSP(内容安全策略)保证安全,从而限制从中获取图像,脚本和样式的位置。
还可以使用子资源完整性来确保脚本 / 样式的内容与特定的哈希匹配,否则将无法执行。
如果你对这种安全技术感兴趣,包括滚动条技巧的更多细节,可以去看看 Mathias Bynens 在 2014 年的演讲,Mike West 在 2013 年的演讲,或 Mario Heiderich 等人的 2012 年论文。没错,这些技术并不是最新的。

本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章

退出移动版