最近给CSS标准添加的功能有点过于强大了导致安全研究者已经开始滥用这些特性去解密访问测试网站的Facebook帐号信息，包括用户名、头像以及他们最近赞过的一个Facebook动态。

通过这个攻击导致的信息泄漏将帮助一些广告主将IP地址或广告信息与真实个人相联系，对用户的在线隐私造成了巨大的威胁。

这个漏洞不是仅适用于Facebook，而是影响所有允许通过iframe框架链接进入的网站。

漏洞存在于浏览器，而不是网站

实际的漏洞在于浏览器执行一个名为“Mix-blend-mode”的CSS特性，这个特性在2016年进入了CSS3标准。

这个mix-blend-mode属性允许网站开发者将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一起向大众揭露了如何通过滥用CSS3mix-blend-mode属性去从其他网站获取泄漏的信息。

这个手法依赖于诱导用户去访问将其他网站以iframe形式嵌入的恶意网站。虽然在他们的例子里，两个嵌入式框架都是套用Facebook的社交组件，但是其他网站也容易受到同样的影响。

这个攻击包括在iframe上覆盖数量和种类超多的DIV图层堆栈。这些图层都是1×1像素大小的，意味着每一个iframe只覆盖了一个像素。

Habalov和Weißer称，根据渲染这么一堆的DIV，攻击者可以确定用户屏幕上这些像素说显示的颜色。

研究人员认为通过逐渐升级在iframe里的这种DIV“扫描”，“是可以获得整个iframe的内容的”

正常情况下，在浏览器和网站都有反劫持和其他安全措施，攻击者也无法访问这些嵌入的iframe框架内的数据。

两个非常明显的演示

在这两个网站的演示中（演示1和演示2），研究者可以获取到用户的Facebook昵称，一个小尺寸的头像和他最近赞过的网站。

实际的攻击大概将用20秒就可以泄漏用户名，500毫秒就可以检查任何赞/踩的页面，以及大概20分钟获得用户的头像。

这个攻击很容易被掩盖，因为iframe可以很容易的放在屏幕不可见的区域，或者用其他元素遮住（看下面的例子，在一张猫的图片进行攻击）。此外，通过让用户在一个网站停留几分钟（例如做在线测试或看长文）也是可以进行解密的。

适用于Chrome和Firefox的修复方法

两人向Google和Mozilla工程师报告了这个错误，他们在Chrome v63和Firefox 60解决了这个问题。

“这个漏洞是通过向量化混合计算进行的”Habalov 和 Weißer 说。Safari的mix-blend-mode并不受此影响，因为混合模式已经被矢量化了。

除此之外，还有一名研究者Max May于2017年3月独立发现该漏洞并报告给Google了。