HTML内联框架标签如何在微前端架构中挂载子应用

iframe挂载子应用本质是利用浏览器原生隔离能力，创建独立浏览上下文，天然实现JS/CSS/DOM三层隔离，不依赖JS沙箱或HTML解析，是唯一真正HTML层级的沙箱方案。

标签在微前端架构中挂载子应用，本质是利用浏览器原生的隔离能力，而非依赖 JS 沙箱或 DOM 解析逻辑。它不走 HTML Entry 的 fetch + DOMParser 路径，而是直接创建一个独立浏览上下文，天然具备 JS、CSS、DOM 三层隔离。

iframe 是唯一真正 HTML 层级的沙箱

1. 同域 iframe 可通过 src="about:blank" 初始化后，用 document.write() 注入子应用 HTML，并显式设置 <base href="https://sub.example.com/">，确保内部资源路径解析正确；
2. 跨域 iframe 则必须由子应用自身提供可访问的 HTML 入口页（如 https://sub.example.com/index.html），主应用仅控制其显示/隐藏与尺寸，无法读写其 DOM 或执行脚本；
3. iframe 内部完全自治：路由、状态、样式、全局变量均与主应用物理隔绝，不存在污染风险，也无需 qiankun 等框架的 mount/unmount 生命周期接管。

主应用如何挂载 iframe 子应用

1. 主应用只需动态创建 <iframe> 元素，设置 src 指向子应用部署地址（必须是完整 URL，含协议）；
2. 推荐将 iframe 挂载到指定容器节点内（如 <div id="app1-container"></div>），而非直接塞进 body；
3. 配合 sandbox 属性可进一步限制能力（如禁用 script、表单提交等），但生产环境通常只需 allow-scripts allow-same-origin（同域时）或默认策略（跨域时）；
4. 使用 postMessage 实现主子通信，双方需约定消息格式并校验 event.origin，避免 XSS 风险。

关键配置要点

1. 子应用服务器需返回正确的 CORS 响应头（跨域场景下非必需，因 iframe 不触发 fetch）；
2. 若子应用使用前端路由（如 Vue Router），必须显式配置 base: '/app1/'，且该路径要与主应用路由激活规则（如 activeRule: '/app1'）对齐；
3. iframe 宽高需显式设置（推荐 CSS width: 100%; height: 100% + 父容器有确定尺寸），避免滚动条或空白；
4. 卸载时只需移除 iframe 元素本身，浏览器自动销毁其全部上下文，无需手动清理样式或事件监听。

不建议混合使用的场景

1. 不要把 iframe 和 HTML Entry 模式混用在同一子应用上——二者加载机制冲突；
2. 避免在 iframe 内再嵌套微前端框架（如 qiankun），会带来冗余沙箱和性能损耗；
3. 不适合需要高频 DOM 交互或共享 UI 组件的场景（如弹窗跨应用复用），因 iframe 边界不可穿透。

本质上，iframe 挂载不是“注入 HTML 字符串”，而是“加载一个独立页面”。它简单、可靠、隔离彻底，适合业务边界清晰、技术栈异构、安全要求高的子应用集成。