23点击劫持【Clickjacking 】

## 概述

**点击劫持（Clickjacking）**，又称 **UI  redress attack（UI 覆盖攻击）**，是一种视觉欺骗手段。

攻击者通过精心设计，将一个透明的、不可见的iframe覆盖在一个看似无害的网页元素（如按钮、视频）之上，诱骗用户在其不知情的情况下点击或操作隐藏的页面上的功能。

例如：一名网络用户访问了一个诱饵网站（可能是电子邮件提供的链接），并点击了一个按钮以赢取奖品。

然而，在不知情的情况下，他们被攻击者欺骗，点击了另一个隐藏的按钮，从而导致另一个网站的账户被支付。这就是点击劫持攻击的一个例子，该技术依赖于在 iframe 中嵌入一个不可见的、可操作的网页（或多个网页），其中包含一个按钮或隐藏链接。

其本质是利用了浏览器对页面元素的渲染机制，让用户的 “物理点击” 与 “实际触发的操作” 分离，用户以为自己在操作正常功能，实则执行了攻击者预设的恶意行为。

## iframe

\<iframe>（内联框架，Inline Frame）是一个 HTML 元素，它允许你在当前 HTML 文档中嵌入另一个独立的 HTML 文档。

可以将其理解为一个“网页中的浏览器窗口”，它拥有自己的 document 和 window 对象，但其内容被限制在一个指定的矩形区域内。

**核心概念**：它创建了一个**嵌套的浏览上下文（Nested Browsing Context）**。主页面是顶级浏览上下文，而每个 `<iframe>` 都是其内部一个独立的子级浏览上下文。

语法结构：

```html
<iframe src="https://example.com" width="600" height="400" title="示例框架"></iframe>
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <h2>这是一个二级标题</h2>
    <iframe src="https://baidu.com" width="600" height="400" title="示例框架"></iframe>
    <h3>这是一个三级标题</h3>
</body>
</html>
```

![image-20250909212233396](https://oss.maolin101.com/image-20250909212233396.png-101.webp)

## 实施步骤

**1. 创建恶意页面**

攻击者制作一个看起来很有吸引力的网页（例如，一个免费抽奖游戏、一个有趣的视频）。

**2. 嵌入目标网站**

通过 `<iframe>` 标签将目标网站（如银行的转账确认页面、Twitter的关注按钮、管理后台的删除按钮）加载到这个恶意页面中。

**3. 隐藏并定位iframe**

使用 CSS 样式（如 `opacity: 0`, `z-index`, `position: absolute`）将这个 iframe 设置为**完全透明**，并将其精确地覆盖在恶意页面的某个诱人按钮（如“点击赢取大奖！”）之上。

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        iframe {
        position: absolute;
        opacity: 0.001; /* 几乎完全透明 */
        z-index: 2; /* 置于上层 */
        width: 500px;
        height: 500px;
        top: 400px; /* 精确定位，覆盖在下面的按钮上 */
        left: 40px;
        }
        button {
        position: absolute;
        z-index: 1; /* 置于下层 */
        top: 400px;
        left: 40px;
        }
    </style>
</head>
<body>

<button>恭喜！您已中奖，点击领取！</button>
<iframe src="https://www.baidu.com/"></iframe>
</body>
</html>
```

![image-20250909212742699](https://oss.maolin101.com/image-20250909212742699.png-101.webp)

**4. 诱变用户点击**

用户访问这个恶意页面，看到的是“点击领取”按钮，完全看不到下面隐藏的银行转账确认按钮。当用户满怀期待地点击时，他的点击实际上被传递给了隐藏的 iframe，确认了一笔给攻击者的转账。

## 危害与影响

**执行敏感操作**：

- 在用户不知情的情况下进行资金转账。
- 关注某个社交账号、点赞或转发特定内容。
- 更改账户邮箱或密码，为后续攻击做准备。
- 在管理后台执行删除、授权等操作（如果用户是管理员）。

**窃取敏感信息**：通过诱使用户点击，可以结合其他技术（如 CSS 注入）来推断或获取隐藏页面上的信息。

**传播恶意软件**：诱骗用户点击网页上的“播放”按钮，实际上点击的是隐藏的“允许安装插件”或“运行可执行文件”的对话框。

**破坏公司声誉**：利用点击劫持让用户在其社交账户上发布不当言论，从而损害用户或相关公司的声誉。

## 防护措施

防御点击劫持的核心是**指示浏览器不允许你的网页被嵌入到 `<frame>`, `<iframe>`, `<embed>`, 或 `<object>` 中**。这主要通过设置 HTTP 响应头来实现。

**1. X-Frame-Options 头部 (传统方法，仍广泛支持)**

这是一个明确的指令，告诉浏览器是否允许该页面被嵌入。

**`DENY`**：最安全的选择。**完全禁止**在任何框架中显示该页面，包括同源网站。

**`SAMEORIGIN`**：允许被**同源域名**的页面嵌入。这对于允许网站内部使用 iframe 是必要的（例如，后台嵌入统计页面）。

**`ALLOW-FROM uri`**：允许被**指定来源**的页面嵌入。**注意：这个选项在现代浏览器中已被弃用，支持度很差，不应再使用。**

```http
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://trusted-site.com // 不要使用！
```

**2. Content-Security-Policy (CSP) 头部 (现代标准方法)**

CSP 是一个更强大、更精细的内容安全策略框架，它提供了 `frame-ancestors` 指令来替代X-Frame-Options 。

**`frame-ancestors 'none'`**：等同于 `DENY`。

**`frame-ancestors 'self'`**：等同于 `SAMEORIGIN`（但更精确，只允许当前协议和域）。

**`frame-ancestors <source>`**：允许被指定的来源嵌入，可以列出多个来源。

```http
Content-Security-Policy: frame-ancestors 'none';
Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors https://trusted-site.com https://another-trusted-site.com;
```

## 实验

靶机地址：https://portswigger.net/web-security/clickjacking/lab-basic-csrf-protected

已知：包含登录功能和一个受 CSRF 令牌保护的删除帐户按钮，用户将点击诱饵网站上显示“点击”字样的元素。

任务：编写一些 HTML 代码来构建账户页面，诱骗用户删除账户，当账户被删除后，实验就算通过了。

登录凭证：wiener:peter