防点击劫持必须通过服务端HTTP响应头配置，因浏览器仅解析响应头中的X-Frame-Options或Content-Security-Policy: frame-ancestors指令；<meta>或JS动态设置均无效，且frame-ancestors优先级更高、需单引号和分号。
防点击劫持必须用服务端 HTTP 响应头，X-Frame-Options 和 Content-Security-Policy 的 frame-ancestors 指令都得在服务器返回 HTML 之前就发出去；任何前端写 <meta> 或 JS 动态设置的方案，浏览器根本不会认。
为什么 X-Frame-Options 必须由服务端配置
浏览器只解析 HTTP 响应头里的 X-Frame-Options，<meta http-equiv="X-Frame-Options"> 自 2015 年起已被 Chrome、Firefox、Safari、Edge 全面废弃。你用 curl -I https://yoursite.com 或 DevTools Network 面板查响应头，根本看不到它。
攻击者构造恶意页时直接 <iframe src="https://yoursite.com"></iframe>，压根不经过你页面里的 <meta> 解析阶段——防御点早就错过了。
-
add_header X-Frame-Options "DENY" always;（Nginx）——always很关键，否则 304 或错误页可能漏发 - Express 中必须在
res.send()前调用res.setHeader('X-Frame-Options', 'DENY') - Next.js 要在
next.config.js的headers()函数里按路由配置，不能靠前端补救
Content-Security-Policy: frame-ancestors 的正确写法
frame-ancestors 是 W3C 标准，优先级高于 X-Frame-Options；如果两者共存，Chrome 等会直接忽略 X-Frame-Options，造成策略冲突或维护混乱。
立即学习“前端免费学习笔记（深入）”；
值必须加单引号、以分号结尾，漏掉引号、用双引号、或写成 none（无引号）会导致整个 CSP 策略被浏览器彻底忽略——不是降级，是失效。
- 完全禁止：
Content-Security-Policy: frame-ancestors 'none'; - 仅同源：
Content-Security-Policy: frame-ancestors 'self'; - 允许多个可信域名：
Content-Security-Policy: frame-ancestors 'self' https://admin.example.com https://partner.co;（空格分隔，不能用逗号，不能带路径）
常见错误现象与排查方式
典型失败表现：安全扫描工具仍报“缺失 frame-ancestors”，或测试页能成功 <iframe src="https://yoursite.com"> 加载你的页面。
原因往往不是没配，而是配错了位置或格式：
- 写了
<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none';">—— 无效，浏览器只认响应头 - Node.js/Express 里漏了末尾分号：
res.set('Content-Security-Policy', "frame-ancestors 'none'")→ 必须是"frame-ancestors 'none';" - Spring Boot 用户还在用
spring.security.headers.frame-options，该配置已过时，应改用spring.security.headers.content-security-policy
别踩前端 JS 检测 top !== self 的坑
这段代码很常见但实际无效：if (top !== self) top.location = self.location;
现代浏览器对跨源 top.location 赋值会抛出 SecurityError，而不是静默跳转；更严重的是，它无法阻止 iframe 已加载完成后的点击劫持——用户看到的是你页面，但点击坐标早已被 CSS 偏移重定向，JS 检测根本来不及干预。
若页面本身允许被嵌入（比如设置了 frame-ancestors 'self' https://trusted.com），此逻辑反而破坏正常业务流程。
真正复杂的点在于：CSP frame-ancestors 和 Cookie 的 SameSite 属性存在隐性冲突——比如 Power Pages 场景下，若要支持 iframe 嵌入且含登录态，SameSite 必须设为 None，同时依赖反 CSRF 令牌兜底，这个组合容易被忽略。
