加 sandbox="allow-scripts" 仅允许外链脚本执行，内联脚本、onclick 等仍被静默忽略；需通过外链 js 或 srcdoc 中的 script 标签绑定事件，且 localstorage 等 api 仍受限，除非同源并添加 allow-same-origin。
只加 sandbox="allow-scripts" 就能跑外链脚本，但内联脚本、onclick 依然失效
加了 sandbox 属性后，默认所有脚本行为都被跳过——不是报错，是直接不解析。想让 JS 执行，必须显式写 sandbox="allow-scripts"，且这个值必须在 iframe 插入 DOM 前就存在，动态设置 iframe.sandbox = "allow-scripts" 完全无效。
但要注意：allow-scripts 只放行通过 <script src="..."></script> 加载的外部脚本，且该资源需满足同源或返回 Access-Control-Allow-Origin 头；它不恢复任何内联执行能力：
-
<script>alert(1)</script>→ 静默忽略 -
<button onclick="fetch('/api')">click</button>→ 绑定完全不生效 -
javascript:void(0)链接、eval()、setTimeout("...")→ 全部被拦
sandbox="allow-scripts" 下怎么让按钮点击触发逻辑
内联事件处理器（如 onclick）在 sandbox 模式下被底层策略屏蔽，即使开了 allow-scripts 也没用。正确做法是把交互逻辑移出 HTML，改用外链 JS 或 srcdoc 中的 <script></script> 块绑定事件：
- 推荐方式：在可信域名下托管一个 JS 文件，比如
https://yourdomain.com/widget.js，里面用document.addEventListener('click', ...) - 轻量替代：用
srcdoc内联 HTML + 外链脚本，例如<iframe srcdoc="<button id='btn'>Click</button><script src='https://trusted.example/handler.js'></script>" sandbox="allow-scripts"></iframe> - 绝对不要依赖
onclick、onload等属性，它们在 sandbox 中永远不工作
为什么加了 allow-scripts 还是报 SecurityError 访问 localStorage
allow-scripts 不等于“恢复全部浏览器 API”。sandbox 模式下 iframe 的 origin 被强制设为 null，所以 localStorage、sessionStorage、cookie 默认不可读写——哪怕脚本本身能运行。
若真需要本地存储，必须同时加 allow-same-origin，但前提是 iframe 的 src 确实与父页协议+域名+端口完全一致（比如都是 https://yourdomain.com/widget.html）。否则：
-
sandbox="allow-scripts allow-same-origin"对跨域src无效，token 被浏览器直接忽略 - 强行加这个组合，既得不到权限，又暴露配置疏漏
-
allow-same-origin是高危开关，生产环境嵌第三方内容时绝不能开
常见错误写法和验证方法
很多人以为 sandbox=""、sandbox=" "、sandbox（无值）有区别，其实三者等效，全部锁死。真正起作用的是属性值里的 token 列表，空格分隔，不能逗号或引号包裹。
验证是否生效，别靠猜，打开控制台直接查：
-
document.querySelector('iframe').sandbox返回空DOMTokenList []→ 没开任何权限 - 返回
DOMTokenList ["allow-scripts"]→ 仅开了脚本权限 - 返回
DOMTokenList ["allow-scripts", "allow-forms"]→ 表单提交也已启用
最容易被忽略的是：allow-scripts 只管初始外链加载，不管脚本后续行为——如果外链 JS 自己再 document.write('<script>...</script>')，照样被拦。要防住这种递归注入，得叠加 CSP 的 script-src 限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
