通过堆栈DIV形式和CSS组合拳跨站获取Facebook账户信息

简介:

通过堆栈DIV形式和CSS组合拳跨站获取Facebook账户信息

最近给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可以很容易的放在屏幕不可见的区域,或者用其他元素遮住(看下面的例子,在一张猫的图片进行攻击)。此外,通过让用户在一个网站停留几分钟(例如做在线测试或看长文)也是可以进行解密的。

通过堆栈DIV形式和CSS组合拳跨站获取Facebook账户信息

适用于Chrome和Firefox的修复方法

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

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

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


原文发布时间为:2018-06-7

本文作者:nana

本文来自云栖社区合作伙伴“嘶吼网”,了解相关信息可以关注“嘶吼网”。

相关文章
|
1月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
21 1
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
移动开发 前端开发 UED
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
|
5月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
269 3
|
5月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
393 1
|
5月前
|
前端开发
前端 CSS 经典:鼠标位置信息
前端 CSS 经典:鼠标位置信息
50 0
|
5月前
|
前端开发
css div填满剩余高度
css div填满剩余高度
110 0
|
5月前
|
前端开发
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
30 0
|
5月前
|
前端开发
css实用技巧——absolute绝对布局的妙用:表单校验提示信息,制作角标
css实用技巧——absolute绝对布局的妙用:表单校验提示信息,制作角标
30 0
|
7月前
|
编解码 前端开发 UED
div+css详解
总的来说,"div+css"是一种强大的网页布局方法,它提供了灵活性和可维护性,使得网页设计师和开发人员能够创建各种各样的页面布局和风格,同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。
144 3

热门文章

最新文章