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 响应头来实现：

> 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 // 不要使用！
```

> 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;
```