深入分析Google YOLO点击劫持漏洞

在当今世界中，按钮已经无处不在，如电梯按钮、机械按钮，甚至位于总统办公桌上的“核按钮”，等等。但是，你是否想过，当我们按下这些按钮时，它们所执行的真的是想要的操作吗？

<iframe>是一个HTML元素，可用于在一个网页中嵌入另一个网页。在下面的页面中，我嵌入了一个伪造的银行网站页面。

注意：这里仅仅给出示意图，实际效果请访问原文

就本场景来说，您只要点击了“Transfer everything”按钮，那么您的所有资金应该会全部转给我。当然这里只是给出一个场景，实际上，点击后并不会发生任何事情。但是，您会点击它吗？

现在，我们为读者介绍另一个按钮。除了提示“无害性”之外，该按钮没有给出任何信息，不过，我建议您点击试试。

看起来你的钱都归我了。别担心，这只是虚拟货币，根本不值钱（这一点与比特币截然相反）。那么，究竟是怎么回事呢？我们知道，CSS有一个名为position的属性，可用于将一个元素放到另一个元素的上面。另外，属性pointer-events还允许点击事件“穿过”一个元素，这样的话，用户的点击实际上将注册到下面的元素上。当将两者结合使用时，攻击者就可以在实际按钮上叠加一个假按钮，并诱骗受害者点击它。读者可以通过“Behind the scene”按钮来直观地了解其工作机制。这是一种经常被忽视和误解的Web应用程序漏洞，通常称为Clickjacking，或点击劫持漏洞。

预期的应用场景

由此可见，<iframe>是非常危险的，pointer-events更是致命的，那么，我们是否应该删除它们呢？也是，也不是。如果没有应用场景，许多东西就根本不会被发明出来，<iframe>也是如此。事实上，在线广告是严重依赖于<iframe>的。更重要的是，web widget也需要用到<iframe>。此外，Facebook的like按钮和Facebook评论插件也是利用<iframe>实现的。

如果您已经登录Facebook，那么您刚才的点击动作，实际上是去给我的贴子点赞（在此谢过），不过这一点您自己根本意识不到。这一次，我们利用的是opacity属性，而非pointer-events。实际上，opacity是用于控制元素不透明度的一个CSS属性。当然，攻击者只要将透明的Facebook like 按钮堆叠到其他可见的按钮的上面，也可以实现相同的点击劫持效果，因此，即使不用pointer-events，照样会受到点击劫持攻击的威胁。顺便说一下，这其实是一种名为Likejacking的Blackhat SEO技术，本质上就是利用点击劫持攻击来获得大量有效的赞。

Framebuster

显然，“消灭”<iframe>和某些CSS属性并不是一个好主意。我们真正需要的，是让网站获得禁止其他网站嵌入其中的能力。之前，人们开发了一种名为Framebusting的技术，该技术可以使用JavaScript来检查一个网站是否嵌入了其他网站的页面。由于window.top总是指向最外层的框架，因此，通过将它与window.self进行比较，就可以确定嵌入的站点是否为其自身。下面给出一段最常用的JavaScript检测代码：

但是，基于JavaScript的framebuster通常都有许多安全缺陷。例如，onBeforeUnload可以中止导航；XSS Filter可以禁止执行特定的JavaScript代码。

各浏览器已经开始支持HTTP响应头X-Frame-Options，用来控制自己网站的页面是否可以嵌入到iframe或frame中：X-Frame-Options：DENY表示自己网站页面不能被嵌入到任何iframe或frame中；X-Frame-Options：SAMEORIGIN表示页面只能被本站页面嵌入到iframe或者frame中；X-Frame-Options：ALLOW-FROM表示只有指定的站点才能将本站页面嵌入到iframe或者frame中。注意: CSP Level 2 规范中的 frame-ancestors 指令会替代这个非标准的头部。

但是，X-Frame-Options：SAMEORIGIN存在一个严重的安全漏洞。

既然嵌入的页面与顶层的frame是同源的，为什么还会出问题呢？ 别忘了，一些网站或明或暗地允许使用自定义iframe。实际上，Twitter Player Card就很容易受到这个安全隐患的影响。当你推送链接时，Twitter将获取链接并读取其meta数据。如果Open Graph属性指定了播放器的URL，则Twitter会将该URL直接嵌入到时间轴中的iframe中。这样，我们就可以在“播放器”中嵌入一个敏感的Twitter页面，例如OAuth授权页面，然后在授权按钮上面覆盖一个假按钮。