FrontEnd Interview

Appearance

点击劫持：视觉欺骗的陷阱与防御之道 ​

在Web安全的攻防博弈中，点击劫持（Clickjacking）是一种极具迷惑性的攻击手段。它不像XSS或CSRF那样直接与代码漏洞相关，而是利用了视觉欺骗的心理战术，让用户在毫不知情的情况下完成攻击者预设的操作。本文将从攻击原理入手，详解其实现方式，并提供多层次的防御策略。

一、点击劫持的原理 ​

1. 攻击定义 ​

点击劫持是一种通过视觉欺骗诱导用户点击的攻击方式。攻击者将目标网站（通常是包含敏感操作的页面，如支付、点赞、删除数据等）通过iframe等方式嵌入到自己的恶意页面中，并设置为透明不可见；同时在页面上覆盖一层看似正常的内容（如按钮、图片、游戏界面等），诱导用户点击。当用户点击这些可见元素时，实际点击的是被隐藏的目标网站上的敏感按钮或链接，从而在用户不知情的情况下完成恶意操作。

可以用一个生活场景比喻：你面前有一张看似空白的纸（恶意页面），但在纸下方藏着一个重要的合同（目标网站），合同上有一个"签名" 按钮正好位于纸张某位置下方。攻击者告诉你"在这张纸上签字"，你以为只是随意涂鸦，实际却在合同上完成了签名确认。这里的"空白纸" 就是恶意页面的可见内容，"隐藏的合同"就是被嵌入的目标网站。

2. 常见实现方式 ​

点击劫持的核心技术是iframe嵌套和CSS视觉隐藏，通过精确控制层叠顺序和透明度，实现"所见非所点"的效果。常见实现步骤如下：

  1. 嵌套目标网站：攻击者在恶意页面中使用iframe标签嵌入目标网站的敏感页面（如用户设置、支付确认页）。
  2. 隐藏目标内容：通过CSS将iframe设置为全屏且完全透明（opacity:0），使其在页面上不可见。
  3. 覆盖诱导内容：在iframe上方放置精心设计的诱导元素（如"领取奖励"、"关闭广告"按钮），其位置与目标网站的敏感按钮精确对齐。
  4. 诱导用户点击：用户点击可见的诱导元素时，实际点击的是下方iframe中目标网站的敏感按钮。

代码示例（恶意页面实现）： ​

html
<!DOCTYPE html>
<html>
<head>
    <style>
        /* 隐藏的目标网站iframe */
        #targetFrame {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw; /* 全屏宽度 */
            height: 100vh; /* 全屏高度 */
            opacity: 0; /* 完全透明 */
            z-index: 2; /* 确保在诱导内容下方（但点击可穿透） */
            pointer-events: auto; /* 允许点击穿透到iframe */
        }

        /* 诱导用户点击的可见内容 */
        #decoy {
            position: absolute;
            top: 200px; /* 与目标网站的"删除账户"按钮位置对齐 */
            left: 300px;
            z-index: 1; /* 位于iframe上方，可见 */
            padding: 20px 40px;
            font-size: 24px;
            background: #ff4d4f;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* 页面背景伪装 */
        body {
            margin: 0;
            background: #f0f2f5;
            text-align: center;
            padding-top: 150px;
        }
    </style>
</head>
<body>
<h1>恭喜您获得100元红包！</h1>
<p>点击下方按钮领取奖励</p>

<!-- 诱导用户点击的按钮 -->
<button id="decoy">领取红包</button>

<!-- 隐藏的目标网站（例如用户设置页面） -->
<iframe
        id="targetFrame"
        src="https://target-site.com/user-settings"  <!-- 目标网站的敏感页面 -->
sandbox="allow-same-origin allow-scripts">   <!-- 解除部分iframe限制 -->
</iframe>
</body>
</html>

在这个示例中：

  • 用户看到的是"领取红包" 按钮，实际点击时会触发iframe中https://target-site.com/user-settings页面的对应位置元素（可能是"删除账户"或"确认转账"按钮）
  • opacity:0让iframe完全透明，用户无法察觉其存在
  • 精心调整的top和left值确保诱导按钮与目标敏感按钮位置精确对齐
  • z-index控制层叠顺序，确保诱导内容可见但点击能穿透到下方iframe

这种攻击的可怕之处在于：用户的操作是"自愿"的（主动点击），目标网站的身份验证也是合法的（用户可能已登录），因此服务器很难区分正常操作与攻击操作。

二、点击劫持的防御措施 ​

防御点击劫持的核心思路是阻止网站被恶意页面嵌入，或在被嵌入时提示用户风险。目前有多种成熟的防御手段，可根据兼容性需求选择组合使用。

1. X-Frame-Options配置 ​

X-Frame-Options是一个HTTP响应头，由微软在IE8中首次引入，用于控制当前页面是否允许被其他页面通过iframe嵌套。它是防御点击劫持的经典方案，兼容性良好（支持所有现代浏览器及IE8+）。

指令说明： ​

  • DENY：禁止任何页面嵌入当前页面（无论来自哪个域名）
  • SAMEORIGIN：只允许同源页面（同一域名）嵌入当前页面
  • ALLOW-FROM uri：允许指定域名的页面嵌入当前页面（注意：部分现代浏览器已不支持此值，如Chrome 70+）

配置示例： ​

Nginx服务器配置：

nginx
# 在nginx.conf或站点配置中添加
add_header X-Frame-Options "SAMEORIGIN";  # 只允许同源嵌入
# 或
add_header X-Frame-Options "DENY";        # 禁止所有嵌入

Apache服务器配置（httpd.conf或.htaccess）：

apache
# 只允许同源嵌入
Header always append X-Frame-Options SAMEORIGIN
# 或禁止所有嵌入
Header always append X-Frame-Options DENY

Node.js（Express）配置：

javascript
const express = require('express');
const app = express();

// 全局应用X-Frame-Options头
app.use((req, res, next) => {
    res.setHeader('X-Frame-Options', 'SAMEORIGIN');  // 只允许同源嵌入
    // res.setHeader('X-Frame-Options', 'DENY');      // 禁止所有嵌入
    next();
});

当浏览器检测到页面设置了X-Frame-Options头，且嵌入来源不符合规则时，会拒绝加载iframe内容，或显示空白页面，从而阻止点击劫持。

2. CSP frame-ancestors指令 ​

内容安全策略（Content Security Policy，CSP）的frame-ancestors 指令是比X-Frame-Options更现代、更灵活的替代方案，用于指定允许嵌入当前页面的父页面来源。它支持多域名配置，且没有X-Frame-Options的兼容性问题。

指令说明： ​

  • frame-ancestors 'none'：禁止任何页面嵌入（相当于X-Frame-Options: DENY）
  • frame-ancestors 'self'：只允许同源页面嵌入（相当于X-Frame-Options: SAMEORIGIN）
  • frame-ancestors example.com *.example.com：允许指定域名及其子域名嵌入
  • 支持组合配置，如frame-ancestors 'self' https://trusted.com

配置示例： ​

通过HTTP响应头设置：

http
# 只允许同源页面和trusted.com嵌入
Content-Security-Policy: frame-ancestors 'self' https://trusted.com;

# 禁止所有嵌入
Content-Security-Policy: frame-ancestors 'none';

Nginx配置示例：

nginx
add_header Content-Security-Policy "frame-ancestors 'self' https://partner-site.com;";

Node.js（Express）配置示例：

javascript
app.use((req, res, next) => {
    res.setHeader(
        'Content-Security-Policy',
        "frame-ancestors 'self' https://trusted-domain.com"
    );
    next();
});

frame-ancestors的优势在于：

  • 支持多个允许的来源，满足复杂业务场景（如合作伙伴嵌入）
  • 语法更灵活，可使用通配符（如*.example.com）
  • 是CSP标准的一部分，未来兼容性更好

注意：当同时设置X-Frame-Options和CSP frame-ancestors时，现代浏览器会优先遵循frame-ancestors。

3. 其他防御手段 ​

（1）JavaScript防御（帧破坏代码） ​

通过JavaScript检测当前页面是否被嵌入到iframe中，若发现被嵌入则采取防御措施（如跳转、显示警告或隐藏内容）。这种方法可作为HTTP头防御的补充，适用于无法配置服务器头的场景。

代码示例： ​

javascript
// 检测页面是否被嵌入到iframe中
if (window.self !== window.top) {
    // 被嵌入时的防御措施
    // 方案1：跳转到自身，打破iframe嵌套
    window.top.location = window.self.location;

    // 方案2：显示警告信息，隐藏敏感内容
    document.body.innerHTML = '<h1>警告：此页面不允许在框架中显示！</h1>';

    // 方案3：关闭当前窗口（需在同域下）
    // window.top.close();
}

局限性：攻击者可通过iframe的sandbox属性（如sandbox="allow-scripts"但禁用allow-top-navigation ）限制JavaScript的跳转能力，因此该方法需与其他防御手段配合使用。

（2）视觉提示与用户教育 ​

  • 在包含敏感操作的页面添加明显的视觉标识（如"重要操作"提示），让用户在点击时提高警惕
  • 教育用户注意异常的页面跳转和点击效果，避免在可疑网站上进行重要操作
  • 对于关键操作（如支付、删除数据），添加二次确认步骤，减少误操作风险

（3）iframe sandbox属性限制 ​

如果网站需要主动嵌入其他页面，应严格限制iframe的sandbox属性，禁止不必要的权限：

html
<!-- 只允许嵌入页面执行脚本，禁止表单提交和拓扑导航 -->
<iframe
        src="https://trusted-content.com"
        sandbox="allow-scripts"
        title="可信内容">
</iframe>

通过限制嵌入页面的权限，降低被反向利用的风险。

总结 ​

点击劫持是一种利用视觉欺骗的攻击方式，其核心在于"偷梁换柱"——用看似无害的点击掩盖对敏感操作的触发。防御点击劫持需从" 阻止非法嵌入"和"增强用户感知"两方面入手：

  1. 首选方案：使用CSP frame-ancestors指令，灵活控制允许嵌入的来源，兼顾安全性和业务需求
  2. 兼容方案：对于旧浏览器，辅以X-Frame-Options头，确保基础防御 coverage
  3. 补充方案：添加JavaScript帧检测代码，作为服务器头防御的备份
  4. 用户层防御：关键操作添加二次确认，提高用户对敏感操作的警惕性

在实际应用中，建议采用"多层防御"策略：以CSP frame-ancestors 为主，X-Frame-Options为辅，结合JavaScript检测和用户教育，形成全方位的防护体系。记住，安全防御不仅是技术问题，也需要考虑用户体验和场景兼容性，找到安全与便捷的平衡点。