html沙箱通过sandbox属性严格限制iframe权限，默认全禁用，需显式声明如allow-scripts、allow-same-origin等权限；注意空格分隔、allow-same-origin与allow-scripts共存限制、存储api需额外授权且浏览器支持不一、fetch/websocket受同源与权限双重约束、postmessage依赖allow-scripts才能收发消息。
HTML沙箱环境怎么用sandbox属性限制脚本执行
直接加sandbox属性会让所有脚本、表单、插件默认禁用，不是“开个白名单”就完事——它默认是全锁死状态，必须显式放行。常见错误是只写<iframe sandbox></iframe>，结果发现alert()不弹、fetch()失败、document.write()报错，还以为是JS写错了。
真正起作用的是带值的写法，比如sandbox="allow-scripts allow-same-origin"。注意两点：一是多个权限用空格分隔，不是逗号；二是allow-same-origin和allow-scripts不能共存（除非源完全一致），否则浏览器直接忽略allow-same-origin，导致localStorage仍不可读。
-
allow-scripts：允许运行JS，但脚本仍受同源策略限制（无法读取父页面DOM） -
allow-popups：允许window.open()或target="_blank"新开窗口 -
allow-forms：不然<form></form>提交会静默失败 - 不加任何值，等价于
sandbox=""，最严格模式
为什么sandbox里localStorage还是报错QuotaExceededError
这不是配额超了，是沙箱环境根本没给存储权限。即使加了allow-scripts，localStorage、sessionStorage、indexedDB默认全部拒绝访问——它们属于“持久化存储”，需要额外声明allow-storage-access-by-user-activation（仅Chrome/Edge支持），且必须由用户手势（如click）触发才能申请。
更现实的做法是：别指望沙箱iframe里存东西。如果真要缓存，改用内存变量或postMessage把数据传回主页面处理。
- Chrome 95+ 支持
allow-storage-access-by-user-activation，但Firefox/Safari不支持 -
localStorage.setItem()在沙箱中直接抛SecurityError，不是QuotaExceededError——后者通常出现在非沙箱环境写爆5MB限额时 - 想测真实配额，得在无
sandbox的独立tab里调navigator.storage.estimate()
sandbox对fetch和WebSocket的限制逻辑
加了sandbox后，fetch()本身能发请求，但响应体是否可读取决于目标域名是否同源 + 是否开了allow-same-origin。跨域请求能发出去，但response.text()会抛TypeError: Failed to fetch（不是网络错误，是CORS被沙箱强化拦截）。
WebSocket更干脆：只要没allow-same-origin，连new WebSocket(url)都会立即触发onerror，且url必须是wss://（ws://在HTTPS页面下直接被浏览器拒掉）。
-
fetch()跨域成功但response.body为空，大概率是没同源权限，不是后端问题 -
WebSocket连接失败时，event.target.url可能已变成"about:blank"，说明沙箱重写了上下文 - 调试时用
console.dir(event.target)比只看event.type更能定位是网络层还是沙箱层拦截
沙箱iframe里postMessage为什么收不到父页面消息
因为sandbox默认关闭allow-scripts，而postMessage监听依赖window.addEventListener('message', ...)，没脚本权限就根本注册不了监听器。不是消息丢了，是压根没启动接收能力。
反过来，父页面向沙箱iframe发消息倒是可以（只要iframe已加载），但沙箱里的postMessage回传会失败——除非开了allow-scripts，且目标origin严格匹配postMessage第二个参数。
- 必须同时满足：
sandbox="allow-scripts"+window.addEventListener('message', ...)在iframe内执行 - 父页发消息用
iframe.contentWindow.postMessage(data, 'https://trusted.com')，沙箱iframe里event.origin必须完全匹配，不能用'*' - 沙箱iframe主动发消息给父页，要用
window.parent.postMessage(...)，且父页需监听message事件并校验event.source
allow-xxx都是独立闸门，开错一个，整条链路就断在看不见的地方。最常被忽略的是：沙箱生效后，iframe的document.domain会被强制设为null，连document.cookie都拿不到——哪怕你觉得自己没动cookie相关代码。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
