课程名称：计算机网络应用 核心摘要：本节讲解点击劫持（Clickjacking）攻击的原理与实现方式，又称 UI 覆盖攻击。攻击者通过透明 iframe 等手段将目标网站覆盖在诱导页面之下，使用户在视觉上看到诱导内容，实际操作却作用于隐藏的目标网站，从而在不知情下执行危险操作。
- 点击劫持（Clickjacking）：又称 UI 覆盖攻击（UI Redress Attack），是一种利用视觉欺骗诱导用户误操作的前端攻击手法。
- 核心思想：利用分层叠加技术，将真实目标页面与诱导页面分层堆叠，通过透明度遮罩实现"所见非所点"的欺骗效果。
| 层级 | 位置 | 内容 | 视觉状态 | 用户感知 |
|---|
| 下层（底层） | z-index 较低 | 真实/目标网站 | 可见 | 用户"以为"在操作此层 |
| 上层（顶层） | z-index 较高 | 诱导/伪装页面 | 透明（transparent） | 实际操作的是此层 |
原理口诀：看到的是下层，点到的是上层。
┌─────────────────────────────┐
│ 上层（诱导页/iframe） │ ← opacity:0 透明，用户看不见
│ ┌───────────────────────┐ │
│ │ 诱导按钮（如"脱衣"） │ │ ← 视觉上显示的按钮
│ └───────────────────────┘ │
├─────────────────────────────┤
│ 下层（目标网站） │ ← 真实存在但被覆盖
│ ┌───────────────────────┐ │
│ │ 目标按钮（如"订阅"） │ │ ← 实际被点击的按钮
│ └───────────────────────┘ │
└─────────────────────────────┘
↑ 两个按钮位置精准重叠
| 载体元素 | 说明 |
|---|
| iframe | 最常用，通过嵌入目标网站并设置透明，覆盖在诱导页之上 |
| image | 将图片设为透明，叠加在目标按钮之上进行诱骗 |
| CSS 属性 | 作用 | 典型取值 |
|---|
opacity | 设置透明度 | 0（完全透明，不可见但仍可点击） |
z-index | 控制层叠顺序 | 上层设大值，下层设小值 |
position | 定位方式 | absolute / relative / fixed |
width / height | 控制覆盖层尺寸 | 精确匹配下层按钮区域 |
display / visibility | 控制可见性 | hidden（注意：display:none 会使元素不可点击） |
关键点：使用 opacity:0 而非 display:none，因为透明元素仍保留点击事件响应能力，而 display:none 会让元素完全脱离交互。
- 创建诱饵页面：攻击者搭建一个带有诱导性内容的网页（如美女图片、"抽奖"按钮等）。
- 嵌入目标网站：使用
<iframe> 加载目标网站，将其作为底层。 - 设置透明覆盖：将 iframe 通过
opacity:0 设为透明，并调整 position、width、height 使其按钮与诱饵按钮精准重叠。 - 隐藏目标存在：用户无法察觉底层目标网站的存在。
- 诱导点击：用户被诱饵内容吸引，点击"诱饵按钮"。
- 误操作触发：实际点击作用于透明 iframe 中的目标按钮，执行危险操作（如订阅、转账、授权等）。
攻击者 → 创建诱饵网页
→ <iframe src="目标网站" opacity:0> 覆盖诱饵按钮
→ 用户访问诱饵页 → 视觉看到诱饵内容
→ 用户点击"诱饵按钮"
→ 实际触发 iframe 中目标网站的"真实按钮"
→ 危险操作在用户不知情下完成
<img src="诱饵图片.jpg" />
<button id="lureBtn">脱衣</button>
<iframe
src="https://目标网站/订阅页面"
style="
position: absolute; /* 绝对定位，便于精准覆盖 */
top: 200px; /* 坐标对齐诱饵按钮位置 */
left: 150px;
width: 120px; /* 尺寸匹配按钮区域 */
height: 40px;
opacity: 0; /* 完全透明：不可见但可点击 */
z-index: 999; /* 置于最上层 */
"
></iframe>
| 要素 | 说明 |
|---|
| 诱饵内容 | 美女图片 + "脱衣"按钮 |
| 目标网站 | 某自频道的订阅页面 |
| 覆盖手法 | iframe 透明层，"脱衣"按钮与"订阅"按钮重叠 |
| 实际后果 | 用户以为在看图，实则为该公众号/自频道增加粉丝数 |
| 源码特征 | 页面含 <img> + <iframe>，iframe 设置了宽度、高度、定位样式 |
- 概念辨析：点击劫持 ≠ 钓鱼（Phishing）。钓鱼靠伪造页面骗取输入；点击劫持靠透明覆盖劫持点击，目标页面是真实的。
- 透明 vs 隐藏：
opacity:0（透明可点击）是攻击关键，display:none（隐藏不可点击）无法实现劫持。 - 层级归属：iframe 通常作上层（透明覆盖），目标网站作下层——勿记反。
- 简述点击劫持的攻击原理及双层结构。
- 点击劫持与钓鱼攻击的本质区别是什么？
- iframe 在点击劫持中扮演什么角色？为何要设置
opacity:0 而非 display:none？ - 列举至少两种点击劫持的防御手段（提示：
X-Frame-Options、Content-Security-Policy: frame-ancestors、JavaScript 防嵌套检测 top == self）。 - 为何说点击劫持中"用户操作的是真实目标网站"？
- 防御机制：本节仅讲攻击原理，目标网站如何主动防御被 iframe 嵌套？（下节内容预告：
X-Frame-Options 响应头、CSP frame-ancestors 指令） - 变种延伸：除 iframe 透明覆盖外，是否存在基于拖拽、双击、光标跟随的点击劫持变种？
- 检测手段：普通用户如何识别自己可能正处于点击劫持攻击页面中？
- 现代浏览器防护：现代浏览器对点击劫持有哪些内置防护机制？是否可被绕过？