iframe子页面能跳转父页面是因默认允许修改top.location，sandbox属性可禁用该行为；最安全写法是不启用allow-top-navigation相关权限，跳转需父页通过postmessage统一管控并校验来源。
为什么 iframe 里子页面能跳转父页面？
因为默认情况下，子页面的 window.top.location.href 或 window.parent.location 可以直接修改父页 URL——只要没加限制。这不是 bug，是浏览器原始行为。一旦你嵌入了第三方脚本（比如广告、分析 SDK），它们就可能执行跳转，把用户带到钓鱼页或恶意站点。
sandbox 属性禁用 top-navigation 的正确写法
sandbox 是唯一能在 HTML 层面阻止子页跳转父页的机制，但必须显式排除相关权限：
- 绝对不要写
sandbox="allow-top-navigation"—— 这等于开门放行 - 也别用
sandbox="allow-top-navigation-by-user-activation"，它只对用户点击触发的跳转放宽限制，仍存在被诱导点击的风险 - 最安全的写法是：不加这两个 token，甚至不写
sandbox属性也比乱配强；如果必须启用脚本，只保留最小集合，例如sandbox="allow-scripts allow-popups" - 注意：
sandbox属性一旦存在（哪怕值为空sandbox=""），所有导航权限都会被关闭，包括top.location、parent.location、document.write等
父页面如何主动控制跳转（替代子页自行跳转）
真有跳转需求时，必须由父页完全掌控流程，子页只能发请求、不能执行跳转：
- 子页调用
window.parent.postMessage({ type: 'navigate', url: '/login' }, 'https://yourdomain.com') - 父页监听
message事件，并严格校验event.origin === 'https://child.example.com'，再执行window.location.href = data.url - 禁止子页在 message handler 里调用
top.location—— 它的top指向自己，不是你的父页；而你的父页无法被它访问，除非你开了allow-same-origin（这反而更危险） - 若子页是同源，也不建议直接操作
parent.location，仍走postMessage流程，统一管控入口
验证跳转是否真被拦截了
别信文档，动手查：
- 打开开发者工具 → 选中 iframe 元素 → 控制台输入
document.querySelector('iframe').sandbox - 返回值应为
DOMTokenList，且不包含allow-top-navigation或allow-top-navigation-by-user-activation - 手动在子页 console 执行
top.location.href = 'https://evil.com'，确认报错SecurityError: Blocked a frame from accessing a cross-origin frame.（跨域时）或静默失败（同源但 sandbox 生效时）
最容易被忽略的是：即使子页 JS 报错，它仍可能通过 document.write 或 meta refresh 触发跳转——这些行为同样受 sandbox 约束，但只有显式启用 allow-scripts 时才需额外关注。没开脚本，就根本没机会执行这些逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
