防点击劫持必须用服务端响应头，x-frame-options或content-security-policy的frame-ancestors指令是唯一有效防线；meta标签和前端js检测均无效或仅作辅助。
防点击劫持必须用服务端响应头，document.write或前端JS检测只是补救
点击劫持不是靠前端“加个脚本就能挡住”的问题。攻击者用透明 <iframe></iframe> 叠在你页面上，用户点的是表层诱饵按钮，事件却穿透到你已登录的敏感操作按钮——整个过程不发请求、不报错、不触发 console，纯 UI 层欺骗。
真正有效的第一道防线是让浏览器根本**不加载你的页面进 iframe**。这只能靠服务端发响应头：X-Frame-Options 或更现代的 Content-Security-Policy 中的 frame-ancestors 指令。
-
X-Frame-Options: DENY最简单直接，所有嵌套一律拒绝（适合登录页、支付页、密码修改页） -
Content-Security-Policy: frame-ancestors 'self';是 W3C 标准，Chrome/Firefox/Edge 全支持，且可写多个源：frame-ancestors 'self' https://admin.example.com; -
<meta http-equiv="X-Frame-Options" content="DENY">无效 —— 浏览器明确忽略 HTML meta 中的这个指令 - JS 检测（如
window.top !== window.self）能隐藏内容或跳转顶层，但可被禁用 JS 的攻击绕过，仅作辅助
frame-ancestors 'none' 和 'self' 的区别与选型陷阱
很多人以为 'self' 就是安全的，其实它只校验协议+域名+端口完全一致。比如 a.example.com 嵌入 b.example.com，即使同属一个主域，也视为跨源，'self' 不放行 —— 这是好事；但如果你的管理后台确需从 admin.example.com 嵌入 app.example.com 的某个子模块，就必须显式列出：frame-ancestors 'self' https://admin.example.com;。
'none' 表示禁止任何嵌套，比 DENY 更严格（DENY 对某些旧版 IE 行为不一致），但注意：它不兼容 ALLOW-FROM 类语法，也不接受通配符。
- 不要写
frame-ancestors *—— 语法错误，浏览器直接忽略整条 CSP - 单引号是必需的：
'self'正确，self或"self"都无效 - 如果同时设置了
X-Frame-Options和frame-ancestors，后者优先，前者被无视
防重放攻击不是前端能独立解决的事，但 HTML 层要配合做三件事
重放攻击指攻击者截获合法请求（如转账 API 调用），稍后重复发送。它本质是服务端鉴权和时效性问题，但 HTML 页面作为入口，必须避免成为漏洞放大器。
- 敏感操作页（如 /withdraw、/change-password）必须禁用浏览器缓存：
Cache-Control: no-store, no-cache, must-revalidate，否则用户点“后退”可能重新提交旧请求 - 表单提交前生成一次性
nonce或timestamp + sign，并由后端校验有效期（通常 ≤ 30 秒），HTML 中通过<input type="hidden" name="ts" value="1719802352">透传 - 禁止自动填充敏感字段（如银行卡号、CVV）：
<input autocomplete="off">或更严格的autocomplete="new-password"，防止密码管理器填入过期 token
CSP 配合防劫持时容易漏掉的两个硬伤
很多人配了 frame-ancestors 就以为万事大吉，结果上线后第三方统计 SDK 报错、内联样式炸开、甚至页面白屏——问题往往出在 CSP 的其他指令没对齐。
-
script-src里没加'unsafe-inline'或nonce，但页面有内联<script>init();</script>→ 直接阻断 JS 执行，功能异常 -
style-src缺失，而框架（如 Vue）或构建工具（如 Vite）默认注入内联 style → 页面样式丢失，UI 错乱，用户误操作风险反而上升 - 测试时别只看 Chrome，Safari 对
frame-ancestors的解析更严格，且不支持report-to上报，得靠真实<iframe></iframe>测试页验证
最易被忽略的一点：CSP 策略一旦启用，就对整个 HTML 文档生效，包括重定向后的页面、<iframe src="about:blank"></iframe> 的子帧、甚至 data URI 加载的内容。策略写宽了等于没设，写严了又断功能，得逐页审计加载行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
