《白帽子讲 Web 安全：点击劫持》

它首次出现在 2008 年，由互联网安全专家罗伯特・汉森和耶利米・格劳斯曼首创。点击劫持（Clickjacking）是一种视觉上的欺骗手段，攻击者通过透明的 iframe 或其他隐藏元素通过覆盖不可见的框架来诱使用户在不知情的情况下执行某些操作。表面上受害者点击的是他们所看到的网页，但实际上点击的是被黑客精心构建的另一个置于原网页上面的透明页面。

**例如：**用户可能在浏览一个看似正常的网页并点击某个按钮时，却在不知情的情况下触发了另一个页面上的恶意操作，如转账、下载恶意软件等。

二、点击劫持的实现示例：诱导用户收藏指定淘宝商品

书中以诱导用户收藏指定淘宝商品为例，详细讲解了点击劫持的实现过程。攻击者创建一个页面，在其中使用 iframe 嵌入目标淘宝商品页面。为了实现劫持效果，需要注意以下几点：

绝对定位：使用绝对定位来控制 iframe 的位置，确保其能够精确覆盖在用户正常浏览的页面之上。

z - index 属性：将 z - index 设置得足够大，使劫持页面的 iframe 处于所有页面的最上层，这样用户的点击操作会首先作用在 iframe 上。

透明度控制：通过 opacity 属性控制页面的透明度，使 iframe 变得透明或半透明，让用户无法察觉其存在，从而在不知不觉中执行收藏商品等操作。

案例

假设攻击者想要诱导用户收藏指定的淘宝商品，他们可以通过以下步骤来实现点击劫持：

构建恶意页面：

攻击者创建一个网页，在这个网页中使用<iframe>标签将淘宝商品页面嵌入其中。例如：

html 复制代码

<iframe src="https://detail.tmall.com/item.htm?id=123456"></iframe>

这里的src属性指向要劫持的淘宝商品页面链接。

设置绝对定位和 z - index：

为了使嵌入的<iframe>能够覆盖在当前页面的上方，需要对其进行绝对定位，并设置足够大的z - index值。例如：

css 复制代码

iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z - index: 9999;

}

通过position: absolute将<iframe>脱离文档流，使其可以自由定位在页面的任何位置；

top: 0和left: 0

将其定位在页面的左上角；width: 100%和height: 100%使其覆盖整个页面；

z - index: 9999确保它位于所有页面元素的最上层。

控制透明度：

为了让用户难以察觉<iframe>的存在，需要将其透明度设置为合适的值。

例如：

html 复制代码

iframe {

opacity: 0.5;

}

这里将透明度设置为 0.5，使<iframe>呈现半透明状态，既不会完全看不见，又不会过于明显，从而增加用户误点击的可能性。用户在浏览恶意页面时，以为点击的是当前页面的内容，实际上点击的是被<iframe>覆盖的淘宝商品页面上的收藏按钮，进而在不知情的情况下完成了商品收藏操作。

三、其他相关攻击技术

3.1图片覆盖攻击与 XSIO

攻击者利用图片的style属性或者 CSS 控制，将恶意链接或按钮等元素通过图片覆盖在正常页面之上,诱使用户点击图片时执行恶意操作。当用户点击图片时，实际上触发的是被覆盖的恶意元素的操作。XSIO（Cross - Site Iframe Observing）则是通过观察 iframe 中的内容变化来获取敏感信息，攻击者可以利用这些技术进一步实施攻击。

例如:攻击者可以将一张看似普通的图片放置在网页上，通过 CSS 将其定位在某个重要按钮的位置，并且设置图片的pointer - events属性为none（使图片不响应鼠标事件，从而让用户的点击能够穿透图片到达下方的恶意元素），这样用户点击图片区域时，就会触发下方隐藏的恶意操作。

3.2拖拽劫持与数据窃取

浏览器中的拖拽对象可以是链接、文字等，并且拖拽不受同源策略限制。攻击者利用这一特性，诱使用户从隐藏不可见的<iframe>中拖拽出攻击者希望得到的数据，然后放到攻击者能控制的另外一个页面，从而窃取数据。在 JavaScript 的支持下，这个攻击过程会变得非常隐蔽。

例如，攻击者可以在一个看似正常的网页中隐藏一个<iframe>，在<iframe>中放置一些敏感数据的链接或元素，然后通过一些诱导信息，让用户误以为是在进行正常的网页操作，将这些数据从<iframe>中拖拽到攻击者指定的区域，从而实现数据窃取。

攻击者可以通过监听用户的拖拽事件，劫持用户的拖拽操作，将用户的敏感数据（如文本、文件等）拖到指定的区域，从而实现数据窃取。这种攻击方式利用了用户在网页上的正常操作行为，具有较高的隐蔽性。

3.3Flash 劫持技术

曾经兴起过利用 Adobe Flash 程序漏洞的点击劫持攻击，通过嵌入恶意的 Flash 文件来实现点击劫持等攻击。

例如:制作一个 Flash 游戏，诱导用户点击 "CLICK" 按钮，每次点击后按钮位置发生变化，通过一步步操作，最终控制用户的摄像头等设备。但随着技术的发展和安全意识的提高，以及浏览器对 Flash 的支持逐渐减少，这种攻击方式已逐渐被淘汰。

3.4Filejacking 劫持攻击

Filejacking 是一种通过劫持用户的文件选择操作来窃取本机文件的攻击方式。攻击者利用 HTML5 的文件 API 和表单元素，诱使用户点击看似普通的按钮或链接选择本地文件，然后将文件内容发送到攻击者的服务器，从而窃取用户本机文件。

**实现原理：**通过巧妙地利用 HTML 的<input type="file">元素，结合 JavaScript 的事件处理，在用户不知情的情况下，让用户选择并上传本地文件，通过隐藏的表单元素和 JavaScript 代码来获取文件信息。

例如，攻击者可以将<input type="file">元素设置为透明且覆盖在一个正常按钮的位置，当用户点击正常按钮时，实际上触发了文件上传操作，攻击者就可以获取用户选择的文件内容。

四、浏览器的防御机制

4.1.原生防御策略

跨域限制：同源策略限制跨域iframe操作
拖拽安全：现代浏览器禁止跨域获取拖拽数据
文件访问限制：禁止通过JS读取完整文件路径

4.2.多维度防御体系

4.2.1.客户端防御 Frame Busting

javascript 复制代码

javascript

if (top != self) {
  top.location = self.location; // 强制跳出iframe
}

Frame Busting 原理和绕过

Frame Busting 是一种常见的防御点击劫持的技术，其原理是在页面中添加 JavaScript 代码，检测页面是否被嵌套在 iframe 中，如果是则采取相应的措施，如跳出 iframe 或阻止页面加载。然而，攻击者可以通过一些技术手段绕过 Frame Busting，如利用浏览器的漏洞或采用新的攻击方式。

绕过方式：

使用XSS Filter绕过（IE）
通过security=restricted属性禁用JS
使用多层iframe嵌套

4.2.2.服务端头信息防御

防御方式	实现代码	特点
X-Frame-Options	`X-Frame-Options: DENY`	兼容性最佳（IE8+）
CSP frame-ancestors	`Content-Security-Policy: frame-ancestors 'none'`	更细粒度的域名控制（现代浏览器）
SameSite Cookie	`Set-Cookie: key=val; SameSite=Lax`	阻止跨域携带认证信息

(1)X - Frame - Options

作用：这是微软提出的一个 HTTP 头，专门用来防御利用<iframe>嵌套的点击劫持攻击，并且在 IE8、Firefox3.6、Chrome4 以上的版本均能很好地支持。

属性值：

DENY：拒绝任何域加载当前页面的<iframe>。

例如，如果一个网站的服务器配置中设置了X - Frame - Options: DENY，那么无论在任何其他网站中尝试使用<iframe>嵌入该网站页面，浏览器都会拒绝加载，从而有效防止点击劫持攻击。

SAMEORIGIN：允许同源域下加载当前页面的<iframe>。即只有当<iframe>的src属性指向与当前页面同源（协议、域名、端口都相同）的页面时，浏览器才会允许加载。这样可以防止其他恶意网站通过<iframe>嵌入本网站页面进行点击劫持，但本网站内的合法页面之间可以通过<iframe>正常嵌套。

ALLOW - FROM uri：可以定义允许<iframe>加载的页面地址。

例如X - Frame - Options: ALLOW - FROM https://trusted - site.com，表示只允许https://trusted - site.com这个特定的网站通过<iframe>嵌入当前页面，其他网站的嵌入请求将被拒绝。

(2)CSP:frame - ancestors 指令

作用：Content - Security - Policy（CSP）中的frame - ancestors指令用于指定哪些页面可以作为当前页面的<iframe>祖先页面，即哪些页面可以通过<iframe>嵌入当前页面。

设置方式 ：例如，设置Content - Security - Policy: frame - ancestors'self'，表示只允许同源的页面（即当前页面自身所在的源）通过<iframe>嵌入当前页面。如果设置为Content - Security - Policy: frame - ancestors'self' https://trusted - site.com，则表示允许同源页面以及https://trusted - site.com这个特定的可信网站通过<iframe>嵌入当前页面，其他网站的嵌入将被阻止。通过这种方式，可以精确控制页面的嵌入来源，有效防范点击劫持攻击。

Content Security Policy（CSP）是一种用于增强网页安全性的机制，CSP:frame - ancestors 指令可以指定允许嵌套当前页面的父页面的源。通过设置该指令，可以有效防止点击劫持攻击。

作用：samesite属性用于控制 Cookie 在跨站请求时的发送行为，从而防范 CSRF（跨站请求伪造）攻击，同时对点击劫持也有一定的防御作用。

属性值：

Strict：严格模式，表明这个 Cookie 在任何情况下都不可能作为第三方的 Cookie，有能力阻止所有 CSRF 攻击。此时，在 B 站点下发起对 A 站点的任何请求，A 站点的 Cookie 都不会包含在 Cookie 请求头中。这就意味着，攻击者通过点击劫持诱导用户在第三方页面上发起对目标网站的请求时，由于目标网站的 Cookie 不会被发送，攻击者无法利用用户已登录的身份进行恶意操作。

Lax：宽松模式，与 Strict 相比，放宽了限制，允许发送安全 HTTP 方法（如Get、OPTIONS、HEAD请求）带上 Cookie，但是不安全 HTTP 方法（如POST、PUT、DELETE请求）时，不能作为第三方链接的 Cookie。这种模式在一定程度上平衡了安全性和可用性，既可以防范大部分危险的跨站请求，又不会对一些正常的跨站链接访问造成太大影响。

Cookie 的 samesite 属性可以控制 Cookie 在跨站请求中的发送行为。通过设置 samesite 属性为"Strict"或"Lax"，可以限制 Cookie 在跨站请求中的使用，从而减少点击劫持等跨站攻击的风险。

4.3.3. 复合防御策略

推荐组合使用：

html 复制代码

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self';
Set-Cookie: SESSIONID=xxx; SameSite=Lax; Secure

总结

点击劫持是一种具有较高风险的 Web 安全威胁，了解其实现原理和防御方法对于保障 Web 应用的安全至关重要。《白帽子讲 Web 安全》一书为我们提供了全面而深入的知识，帮助我们更好地应对这些安全挑战。点击劫持作为一种隐蔽且危险的 Web 安全威胁，需要我们在开发和使用 Web 应用时保持高度警惕。通过了解其原理、实现方式和防御方法，我们可以采取有效的措施来保护用户的安全和隐私，确保 Web 应用的安全性和可靠性。

喜欢的点点赞和关注，持续分享