什么是点击劫持？如何防范？

简化版

点击劫持（Clickjacking）是攻击者把目标网站用透明的 iframe 嵌进自己的恶意页面，再诱导用户去点看似无害的按钮，实际点到的是下面那层目标网站的敏感操作（如「确认转账」「授权」「删除」）。用户以为点的是 A，其实点了 B。防范核心：禁止自己的页面被别的网站用 iframe 嵌套——用响应头 X-Frame-Options 或 CSP 的 frame-ancestors。

详细版

攻击原理：

攻击者做一个诱饵页面（如「点击领取奖品」）；
把目标网站（如你的银行转账页）用一个 iframe 嵌进来，并设成完全透明（opacity: 0）盖在诱饵按钮上方；
用户看到的是「领取奖品」按钮，但因为透明 iframe 盖在上面，用户点击时实际点到的是 iframe 里目标网站的「确认」按钮；
由于用户此时可能已登录目标网站（带着 Cookie），这次点击就以用户身份执行了敏感操作。

关键：用户在视觉上被欺骗——看到的和实际点到的不是一回事（「劫持」了点击）。它不窃取数据，而是盗用用户的点击行为。

防范手段（核心是禁止被 iframe 嵌套）：

X-Frame-Options 响应头：
- DENY：完全禁止任何页面用 iframe 嵌套本页；
- SAMEORIGIN：只允许同源页面嵌套；
CSP 的 frame-ancestors 指令（更现代、更灵活）：Content-Security-Policy: frame-ancestors 'self'，控制哪些源可以嵌套本页，是 X-Frame-Options 的替代和增强。

完整版教学

一、点击劫持的本质：欺骗的是「视觉」和「点击」

大多数 Web 攻击针对的是「数据」（偷 Cookie、注入代码），而点击劫持很特别——它针对的是用户的视觉认知和点击行为：

用户没被骗提交表单、没被注入脚本，他只是「点了一下自己以为安全的按钮」；
但因为透明 iframe 的存在，这一下点在了看不见的目标网站上；
加上用户在目标网站已登录，这次点击就成了「用户亲手执行」的敏感操作。

所以它是一种界面层的欺骗（UI Redressing）——把危险操作「伪装」在无害的界面下面，骗用户替攻击者点下去。理解这点，就明白防御为什么是「不让自己被嵌进别人的页面」。

二、和 CSRF 的区别与联系

点击劫持和 CSRF（详见「CSRF」那道题）都利用了「用户已登录 + 冒用身份执行操作」，但手段不同：

CSRF：攻击者自动发起请求（用户完全无感，一个 <img> 就触发）；
点击劫持：需要用户真的去点（诱导用户点击透明 iframe 下的按钮）。

点击劫持还能绕过 CSRF Token！因为它是让用户在真实的目标页面里点击，页面里的 CSRF Token 是真实合法的——所以光有 CSRF Token 防不住点击劫持。这也说明两者需要分别防御：CSRF 靠 Token/SameSite，点击劫持靠禁止 iframe 嵌套。

三、防御一：X-Frame-Options

最经典的防御是响应头 X-Frame-Options，它告诉浏览器「本页面能不能被放进 iframe」：

DENY：任何页面都不能用 iframe/frame 嵌套本页——最严格，适合不需要被任何页面嵌套的敏感页面（如支付、后台）；
SAMEORIGIN：只有同源页面能嵌套——适合自己的页面里可能要 iframe 自己的其他页面的情况。

浏览器收到这个头，如果发现本页正被一个不允许的页面嵌套，就拒绝渲染——攻击者的透明 iframe 里根本加载不出目标页，点击劫持自然失效。

四、防御二：CSP frame-ancestors（更现代）

X-Frame-Options 是较老的方案，只能 DENY / SAMEORIGIN，不够灵活。现代推荐用 CSP 的 frame-ancestors 指令：

Content-Security-Policy: frame-ancestors 'self' https://trusted.com

frame-ancestors 'none' ≈ DENY；
frame-ancestors 'self' ≈ SAMEORIGIN；
还能精确指定允许嵌套本页的多个可信源。

它比 X-Frame-Options 更灵活、是其官方替代。实践中常两者都设（X-Frame-Options 兼容老浏览器，frame-ancestors 面向现代浏览器）。

五、其他防御与补充

Frame Busting（JS 防御，已过时）：早期用 JS 检测 if (top !== self) top.location = self.location 来「跳出」iframe。但能被各种手段绕过（如 iframe 的 sandbox 属性禁掉 JS），不可靠，现在以响应头为主。
敏感操作二次确认：转账、授权等关键操作加二次验证（输密码、验证码、短信）——即使被点击劫持点了一下，没有二次确认也执行不了。这是纵深防御的兜底。

六、常见误区

❌ 以为点击劫持偷数据——它盗用的是「用户的点击行为」，欺骗视觉让用户误点。
❌ 以为 CSRF Token 能防点击劫持——用户点的是真实页面、Token 合法，防不住，要靠禁 iframe。
❌ 用 JS 的 Frame Busting 防御——能被绕过，不可靠，应该用 X-Frame-Options/CSP 响应头。
❌ 所有页面都不防——敏感操作页面（支付、授权、后台）尤其要设 DENY/frame-ancestors。

六、常见误区与追问

考点	正确口径
攻击方式	把目标页面放进透明 iframe 诱导点击
风险	用户以为点 A，实际点了敏感按钮 B
防护	X-Frame-Options、CSP frame-ancestors

X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'self' https://trusted.example

attacker page: transparent iframe over fake button

点击劫持不偷密码，它偷的是用户已经登录后的“真实点击”。

误区：HTTPS 能防点击劫持。 HTTPS 保护传输，不阻止页面被嵌入 iframe 诱导点击。
误区：只要按钮加二次确认就够。 二次确认也可能被覆盖或诱导点击，根本防护是限制被嵌入。
误区：X-Frame-Options 和 CSP 可以随便混用无差别。 现代推荐 CSP frame-ancestors，但也可兼顾旧浏览器使用 X-Frame-Options。
追问：DENY 和 SAMEORIGIN 区别是什么？ DENY 禁止任何页面嵌入，SAMEORIGIN 允许同源页面嵌入。
追问：frame-ancestors 比 frame-src 控制什么？ frame-ancestors 控制谁能嵌入当前页面，frame-src 控制当前页面能嵌入谁。
追问：哪些页面最需要防护？ 支付、授权、账户设置、后台管理等登录后敏感操作页面。

七、加强记忆

点击劫持是把目标网站用透明 iframe 嵌进恶意页面、诱导用户误点其中的敏感按钮（用户以为点 A 实际点 B），盗用已登录用户的点击执行操作。它能绕过 CSRF Token（点的是真实页面），需单独防御——核心是禁止本页被 iframe 嵌套：X-Frame-Options: DENY/SAMEORIGIN 或 CSP 的 frame-ancestors，敏感操作再加二次确认兜底。

简化版

详细版