iframe是HTML层面唯一真正的JS沙箱隔离方案，因其拥有独立window、document、history、location及事件循环，同域about:blank可安全注入脚本并仅通过postMessage通信。
直接用 iframe 是目前 HTML 层面唯一能实现真正 JS 沙箱隔离的方案，其他纯 JS 实现（如 Proxy、快照）都不算“HTML 做的”，而是运行时劫持，且无法阻止子应用直接修改 window 或触发原生副作用。
为什么只有 iframe 算 HTML 层沙箱
浏览器对 iframe 的隔离是引擎级的：它拥有独立的 window、document、history、location，甚至独立的事件循环和 JS 执行上下文。只要 src="about:blank" 且同域，就能通过 iframe.contentWindow 安全拿到一个干净、隔离、可编程的全局对象。这不是模拟，是真实副本。
其他方案都绕不开一个问题：代码最终还是在主页面的 JS 引擎里跑，哪怕用 Proxy 包一层 window，子应用仍能通过 eval、Function 构造器、with、Symbol.unscopables 等方式逃逸；快照沙箱更是在主 window 上直接改，靠“还原”来假装隔离——根本不是隔离。
-
iframe是唯一能让window.addEventListener('click', ...)不影响主站事件监听的方案 - 只有
iframe能让history.pushState触发子应用路由但不污染主应用 history stack（需配合 joint session history） - 跨域 iframe 可进一步用
sandbox="allow-scripts allow-same-origin"控制能力，但同域about:blank更轻量、无网络请求、无 CSP 阻断风险
iframe.contentWindow 怎么安全注入子应用 JS
关键不是“怎么注入”，而是“注入后怎么不让它污染主环境”。正确做法是：不把子应用脚本 eval 到主页面，而是写入 iframe 的 document 并执行。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
示例流程：
const iframe = document.createElement('iframe');
iframe.src = 'about:blank';
document.body.appendChild(iframe);
const win = iframe.contentWindow;
const doc = win.document;
// 写入子应用 HTML 结构（含 script 标签）
doc.open();
doc.write(`
<!DOCTYPE html>
<html>
<head><base href="${subAppBase}"></head>
<body>
<div id="root"></div>
<script src="${subAppEntry}"><\/script>
</body>
</html>
`);
doc.close();
- 必须确保
subAppEntry是同域资源，否则跨域会触发 CORS 或拒绝执行 -
<base href>很重要，否则子应用内相对路径的fetch、图片、样式等会 404 - 不要用
win.eval()或win.execScript()，那等于把代码拉回主上下文执行，沙箱失效 - 若需通信，只走
postMessage+message事件，避免任何直接引用（如win.xxx）
常见踩坑：你以为隔离了，其实没隔离
很多团队用 iframe 却仍然出现变量冲突或样式泄漏，问题不在沙箱本身，而在使用方式。
- 误用
iframe.src指向真实子应用 URL（如https://sub.example.com），导致跨域，contentWindow无法访问，只能退化为黑盒 iframe，无法控制生命周期和通信 - 在主页面
document.head中动态插入子应用的<script>，然后试图用Proxy包住window—— 这根本不是 iframe 沙箱，只是快照/代理沙箱，且已执行过一轮污染 - 共享
document或localStorage：虽然iframe有自己document，但localStorage、sessionStorage、indexedDB仍是同源共享的，子应用调用localStorage.setItem('token', ...)主应用立刻可见 - 忽略 CSS 泄漏：iframe 内部样式默认不穿透，但若子应用用了
!important或全局选择器（如body { margin: 0 }），可能通过继承或层叠影响主页面——需额外用ShadowDOM或 scoped style 封装
真正可靠的 HTML 微前端 JS 沙箱，就一条路：同域 about:blank iframe + document.write 注入 + postMessage 通信。所有“绕开 iframe”的方案，本质都是妥协——要么牺牲隔离性，要么增加逃逸风险。别被“Proxy 更轻量”误导，轻量不等于安全，尤其当子应用来自多个不可信团队时。
