利用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进行加载的远程站点中实现的反点击劫持和其余安全措施的限制。

两个使人印象深入的演示示例

经过两个在线发布的演示示例（这里和这里），研究人员可以获取用户的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提交了相应的报告。

若是演示网站打不开，能够经过此地址下载源码。 若是本篇文章对你有帮助，麻烦给个star 原文连接 看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。 我的主页，如需转载，请放上原文连接并署名。码字不易，感谢支持！

若是喜欢本文的话，欢迎关注个人订阅号，前端玩法，期待将来共同窗习成长。