黑客如何利用CSS mix-blend-mode在firefox和chrome中获取Facebook用户信息

概述

最近，层叠样式表（CSS）的Web标准中又增加了一些新的功能，这些功能是如此强大，以至于安全研究人员可以滥用这些功能，对演示站点的访问者实施去匿名化攻击，从而暴露他们的Facebook用户名、头像以及是否喜欢特定的Facebook页面。

通过这种攻击泄露的信息，可以帮助某些广告商将IP地址或广告资料与现实生活中的人对应起来，从而对用户的在线隐私构成严重威胁。

该漏洞的影响范围并不仅限于Facebook，而是所有允许通过iframe将其内容嵌入其他网页的网站。

漏洞存在于浏览器中，而非网站中

实际上，该漏洞的根本原因，不在于网站，而在于浏览器对名为"mix-blend-mode"的CSS特性的实现，该特性是于2016年引入CSS3 web标准的。

mix-blend-mode特性允许Web开发人员将Web组件叠放在一起，并控制其混合效果。

正如该特性的名称所暗示的那样，这些效果是受Photoshop、Gimp、Paint.net等照片编辑软件中的混合模式的启发而来的。其中，常见的混合模式为叠加、变暗、变亮、颜色减淡、正片叠底、反转等。

CSS3的mix-blend-mode特性支持16种混合模式，其中Chrome浏览器（自从v49版本开始）和Firefox浏览器（自从v59版本开始）对这些模式提供了全面的支持，而Safari浏览器则只提供了部分支持（从macOs系统上的v11版本和从iOS系统上的v10.3版本开始）。

研究人员使用DIV堆叠来重建iframe内容

在今天发布的研究报告中，谷歌安全工程师Ruslan Habalov与安全研究员 Dario Weißer一起曝光了攻击者是如何滥用CSS3的mix-blend-mode特性通过其他站点来泄漏用户信息的。

这个漏洞的局限性在于，攻击者必须设法诱导用户访问一个恶意网站，然后在恶意网站里面嵌入iframe来加载其他网站。在上面提及的两位研究人员给出的示例中，虽然两个嵌入的iframe加载的都是Facebook的页面，但其他网站也容易受到这个安全问题的影响。

具体攻击手法为，在iframe之上叠加大量的DIV层，并且每一层都使用不同的混合模式。实际上，每一层只是一个1x1像素的图片，换句话说，每一层只能覆盖iframe的一个像素。

Habalov和Weißer表示，根据渲染所有DIV堆栈所需的时间，攻击者可以确定用户屏幕上显示的像素颜色。

研究人员说，通过逐一将这种DIV“扫描”层放到iframe上面，“就可以确定iframe的内容。”

正常情况下，攻击者是无法访问这些iframe的数据的，这主要得益于浏览器和允许其内容通过iframe进行加载的远程站点中实现的反点击劫持和其他安全措施的限制。

两个令人印象深刻的演示示例

通过两个在线发布的演示示例（https://rawgit.com/evonide/misc/master/fb_name_leak_poc.html和https://rawgit.com/evonide/misc/master/fb_leak_general_poc.html），研究人员能够获取用户的Facebook名称、低分辨率版本头像以及喜欢的站点。

对于现实中的攻击来说，获取用户名只需20秒左右；而500毫秒足以用来检查用户对所有页面的喜欢/不喜欢状态；如果花上20分钟左右的时间的话，就可以获取Facebook用户的头像。

这种攻击很容易实现隐身，因为iframe可以轻松移出屏幕，或隐藏在其他元素下面（请参阅下面的演示gif动画演示，这里的攻击是以猫照片为掩护的）。 此外，通过让用户完成某些在线测试或阅读一篇长文，诱骗用户在网站上驻留几分钟并非难事。

适用于Chrome和Firefox的修复程序

Google和Mozilla的工程师在收到研究人员的漏洞报告后，已经为Chrome 63和Firefox 60修复了这个安全漏洞。

“这个安全问题是通过向量化混合模式计算来解决的，”据Habalov和Weißer称。由于Safari浏览器的混合模式操作已经被矢量化，所以，Safari的CSS3 mix-blend-mode特性实现不会受到该漏洞的影响。

除此之外，另一位名叫Max May的研究人员也独立发现了该漏洞，并于2017年3月向Google提交了相应的报告。

如果演示网站打不开，可以通过此地址(https://github.com/npm-ued/misc)下载源码。

如果本篇文章对你有帮助，欢迎给个star

更多内容欢迎关注前端玩法