最稳方案是服务端配置X-Frame-Options或CSP frame-ancestors响应头，Nginx需用add_header X-Frame-Options "DENY" always;或add_header Content-Security-Policy "frame-ancestors 'self' https://admin.example.com;" always;，二者不可共存，且和JS检测已失效。
直接用响应头设置 X-Frame-Options 最快最稳
服务端加一个响应头，浏览器就会拒绝在 <iframe></iframe> 里加载你的页面。Nginx 配置只需一行：add_header X-Frame-Options "DENY" always;。注意必须带 always 参数，否则 304、4xx 响应不生效。
常见错误包括：X-Frame-Options 拼错（比如少连字符、大小写不对）、写在 location /api 里却忘了覆盖 / 主页、或被 CDN/WAF 清掉头。上线后务必用 DevTools 的 Network → Headers 确认响应里真有这个字段。
优先用 Content-Security-Policy 的 frame-ancestors
现代浏览器（Chrome 97+、Firefox 95+）会忽略 X-Frame-Options，只要 frame-ancestors 存在就以它为准。配置更灵活，比如只允许同源和某个管理后台嵌套：add_header Content-Security-Policy "frame-ancestors 'self' https://admin.example.com;" always;
关键细节：'self' 必须带单引号；多个来源用空格分隔，不是逗号；末尾分号不能漏；none 等价于 DENY；如果同时配了 X-Frame-Options 和 frame-ancestors，前者会被完全忽略。
别信 <meta> 标签和前端 JS 检测
<meta http-equiv="X-Frame-Options"> 在 Chrome 120+、Firefox 125+、Safari 17+ 全部失效，连 IE 都早淘汰了，2026 年纯属摆设。
JS 判断 window.top !== window.self 更不可靠：禁用 JS 就绕过；父页用 sandbox="allow-scripts" 可拦截你的脚本；document.referrer 在跨域、HTTPS→HTTP、隐私模式下为空或伪造；还可能误杀自己合法的 iframe 场景（比如内嵌地图）。它只能当兜底提示，不能当安全边界。
嵌套不可避免时，用 sandbox 限制第三方 iframe 权限
如果你必须嵌入外部内容（如广告、地图），<iframe sandbox="..."></iframe> 是必要手段。默认情况下它禁用脚本、表单提交、弹窗、插件等高危行为。
切记：allow-scripts 和 allow-same-origin 不能同时开——这等于放弃同源策略，让恶意 iframe 获得完整 DOM 访问权。最小权限原则：只开真正需要的，比如 sandbox="allow-scripts allow-popups"。
真正容易被忽略的是：CSP 的 frame-ancestors 和 Nginx 的 add_header 写法看似简单，但引号、空格、分号、always 这些细节一错，整个防护就形同虚设。上线前必须用真实请求验证响应头是否抵达浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
