必须开sandbox，但不可空值滥用；默认禁用脚本、表单、弹窗、存储等全部权限，需按最小权限原则显式添加allow-scripts等白名单token。
iframe 的 sandbox 属性到底开不开？
不开 sandbox 就等于把页面控制权白送给嵌入内容——哪怕只是加载一个第三方统计脚本或广告位，它也能执行 document.write、读取父页面 localStorage、发起任意跨域请求，甚至调用 top.location.href = '...' 劫持整个页面。必须开，但不能无脑加 sandbox 空值。
只写 sandbox 不带值是最大误区
写成 <iframe sandbox src="..."></iframe> 相当于关死了所有权限：JS 禁用、表单禁用、插件禁用、弹窗禁用、脚本无法访问 DOM……连 alert() 都会直接报错 Blocked script execution in 'about:blank' because the document's frame is sandboxed。实际中多数嵌入需求至少需要 JS 和基础 DOM 交互。
常见合理组合（按需叠加）：
-
sandbox="allow-scripts"：允许执行 JS，但禁止访问父页面、禁止弹窗、禁止表单提交 -
sandbox="allow-scripts allow-same-origin"：仅当嵌入同源资源时才可加此组合；否则浏览器会忽略allow-same-origin，并强制降级为 null-origin（此时window.origin变成"null"） -
sandbox="allow-scripts allow-popups"：适用于需要打开新窗口的场景（如“在新标签页查看报告”按钮） - 避免使用
allow-top-navigation：这会让子页面能跳转整个 tab，是钓鱼常用手法
同源判断失效？别信 document.domain 那套了
启用了 sandbox 后，哪怕 iframe 和父页同域，iframe.contentWindow 也无法通过 postMessage 外的任何方式访问父页面——parent.document 报错，document.domain = 'xxx.com' 直接被忽略，iframe.contentDocument 返回 null。唯一合规通信方式只剩 postMessage。
实操注意点：
- 父页监听必须指定
event.origin校验来源，不能写'*' - 子页发消息前，得先确认
event.source是可信上下文（比如只响应来自https://trusted-widget.example.com的初始化消息） - 若子页需操作自身 DOM 并反馈结果，必须由子页主动
postMessage，父页不能反向调用
Chrome 和 Safari 对 sandbox 的静默降级行为
某些旧版 Safari（15.4 之前）和部分 Android WebView 会忽略未声明的权限项，比如写了 sandbox="allow-scripts" 却没写 allow-forms，但子页里表单仍能提交——这不是功能正常，是沙箱没生效。更隐蔽的是：Chrome 117+ 开始对缺失 allow-scripts 但含内联 onload 的 iframe 自动补上该权限，导致你以为关了 JS 实际却开了。
稳妥做法：
- 始终显式声明所有需要的权限，不依赖隐式行为
- 在子页 JS 中检测
window.self !== window.top且!window.opener && !window.parent，确认自己真处于沙箱环境 - 上线前用
chrome://sandbox/（Chrome）或 Web Inspector 的 “Frame” 面板检查实际生效的 sandbox 权限列表
allow-* 都得问一句：这个能力是不是当前业务非用不可？漏掉的比多加的更危险。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
