点击劫持防护必须依赖服务端注入的HTTP响应头，<meta http-equiv="X-Frame-Options">完全无效，因自2015年起被Chrome 40+、Firefox 50+、Safari 10.1+、Edge 14+等所有现代浏览器废弃；Content-Security-Policy: frame-ancestors是W3C推荐标准，但语法严格：'none'和'self'必须带单引号，多源用空格分隔，不支持通配符或路径后缀。
点击劫持防护不能靠前端HTML代码“写得漂亮”来实现，X-Frame-Options 和 Content-Security-Policy 的 frame-ancestors 指令必须由服务端注入响应头，任何写在 <meta> 里的尝试都无效。
为什么 <meta http-equiv="X-Frame-Options"> 完全没用
浏览器自2015年起已彻底废弃对 <meta> 标签中 X-Frame-Options 的解析。Chrome 40+、Firefox 50+、Safari 10.1+、Edge 14+ 全部忽略它。
- 你用
curl -I https://yoursite.com查不到该 header，就说明它根本没生效 - 本地开发时看似“有效”，大概率是 Vite/webpack dev server 自动注入了响应头，不是
<meta>起的作用 - 攻击者直接
<iframe src="https://yoursite.com">加载你的页面，压根不经过你 HTML 的<head>解析阶段
Content-Security-Policy frame-ancestors 的语法坑
frame-ancestors 是当前唯一被 W3C 推荐、所有现代浏览器强制执行的标准方案，但它对语法极其敏感，错一个字符就等于没设。
-
'none'和'self'必须带单引号，写成frame-ancestors none或frame-ancestors self会直接失效 -
'self'不支持路径后缀，'self'/admin或'self' https://example.com/admin都非法 - 多个源之间用空格分隔，不能加逗号：
frame-ancestors 'self' https://embed.example.com https://dash.company.net - 通配符不被支持：
https://*.example.com会被忽略，必须列全可信域名
前端 JS 检测 top !== self 为什么危险且误导
这类逻辑常见但早已过时，不仅防不住点击劫持，还会引入新问题。
立即学习“前端免费学习笔记（深入）”；
- 现代浏览器对跨源
top.location = self.location会抛出SecurityError，而不是跳转，代码直接中断 - 同源子域名（如
evil.example.com嵌入app.example.com）会让top === self判断恒为 true，完全失效 - 它无法阻止 iframe 已加载完成后的 UI 覆盖——点击坐标早已被 CSS
opacity: 0+position: absolute偏移重定向，JS 检测来不及干预 - 若业务本身允许嵌入（比如配置了
frame-ancestors 'self' https://partner.co），这段 JS 反而破坏正常流程
真正起效的只有服务端响应头；frame-ancestors 的单引号、空格、无通配符这些细节，才是上线前必须肉眼核对的硬性检查点。
