微前端架构下 qiankun 沙箱机制与全局污染防御
在大型数字化工作台与复杂企业级系统中，微前端架构让数十个异构技术栈的子团队能够实现独立开发、独立构建与独立部署。然而，当所有子应用最终被加载进同一个宿主浏览器的同一 Tab 页内时，原本彼此隔离的代码世界就不可避免地陷入了一场关于全局环境所有权的争夺战。
子应用向window上随意挂载的全局变量、未清理的setInterval定时器、向document.body注入的全局 CSS 样式，随时可能在子应用切换时引发不可预料的“幽灵故障”。
要实现微前端的稳健运行，必须在内核层面筑起严密的 JS 运行时沙箱与样式隔离防线。
JS 沙箱的演进：从快照到多实例 Proxy
qiankun 底层为应对不同浏览器兼容性与单/多应用并发场景，设计了三种核心沙箱实现：
┌─────────────────────────┐ │ qiankun JS 沙箱 │ └────────────┬────────────┘ │ ┌───────────────────────┼───────────────────────┐ ▼ ▼ ▼ 【SnapshotSandbox】 【LegacySandbox】 【ProxySandbox】 (快照沙箱，单实例) (单实例 Proxy 沙箱) (多实例 Proxy 沙箱) 遍历 window 记录差异 依赖 Proxy 拦截 set 基于 fakeWindow 深度隔离 用于不支持 Proxy 的老环境 用于单应用激活场景 真正支持多微应用同时激活1. 快照沙箱（SnapshotSandbox）
在激活（active）时遍历一次window并保存当前快照；在失活（inactive）时再次遍历window计算出差异并回滚，同时记录子应用修改的值。这种方式的开销是 $O(N)$ 的全局对象全量扫描，性能较差，且仅支持单实例运行。
2. 多实例代理沙箱（ProxySandbox）
现代浏览器中，支持多个微应用在同一个屏幕内同时渲染（例如主界面左侧是 Vue 报表子应用，右侧是 React 流程图子应用）。这就必须依赖基于Proxy和fakeWindow的多实例沙箱机制。
其核心实现逻辑如下：
export class MultiInstanceProxySandbox { public name: string; public proxy: WindowProxy; public sandboxRunning = false; // 存放子应用自身的局部全局属性 private fakeWindow: Record<string | symbol, any> = {}; // 记录沙箱期间绑定的全局副作用 private eventListeners: Array<{ type: string; listener: EventListenerOrEventListenerObject; options?: boolean | AddEventListenerOptions; }> = []; private timerIds: Set<number> = new Set(); constructor(name: string) { this.name = name; const rawWindow = window; const fakeWindow = this.fakeWindow; this.proxy = new Proxy(fakeWindow as Window, { set: (target, p, value) => { if (!this.sandboxRunning) return true; // 子应用对 window 的写操作全部留在 fakeWindow 中，不污染宿主 rawWindow target[p as any] = value; return true; }, get: (target, p) => { // 特殊属性处理：指向自身代理对象 if (p === 'window' || p === 'self' || p === 'globalThis') { return this.proxy; } // 优先从子应用自己的 fakeWindow 寻找，找不到再去宿主 window 兜底 const value = p in target ? target[p as any] : (rawWindow as any)[p]; // 必须为原生函数绑定 rawWindow 作用域，防止非法调用（如 window.getComputedStyle） if (typeof value === 'function' && !value.prototype) { return value.bind(rawWindow); } return value; }, has: (target, p) => { return p in target || p in rawWindow; }, deleteProperty: (target, p) => { if (!this.sandboxRunning) return true; if (Object.prototype.hasOwnProperty.call(target, p)) { delete target[p as any]; } return true; }, }); } public active() { this.sandboxRunning = true; } public inactive() { this.sandboxRunning = false; // 清理子应用遗留的所有全局副作用 this.clearSideEffects(); } private clearSideEffects() { // 1. 清理未销毁的定时器 this.timerIds.forEach((id) => clearInterval(id)); this.timerIds.clear(); // 2. 清理事件监听 this.eventListeners.forEach(({ type, listener, options }) => { window.removeEventListener(type, listener, options); }); this.eventListeners = []; } }全局副作用劫持：定时器与 DOM 事件的守护
仅仅代理window.foo = 'bar'还不够。在真实的工程场景中，很多前端代码会直接调用window.addEventListener('resize', fn)或setInterval(fn, 1000)。如果子应用卸载时没有手动执行removeEventListener或clearInterval，宿主主线程将在后台持续运行这些死循环任务，导致严重的内存泄露与性能拖慢。
沙箱系统必须在子应用挂载期间对基础全局 API 进行统一劫持与重写：
export function patchWindowSideEffects(sandbox: MultiInstanceProxySandbox) { const rawAddEventListener = window.addEventListener; const rawSetInterval = window.setInterval; // 劫持定时器 (sandbox.proxy as any).setInterval = (handler: TimerHandler, timeout?: number, ...args: any[]) => { const timerId = rawSetInterval(handler, timeout, ...args); (sandbox as any).timerIds.add(timerId); return timerId; }; // 劫持全局事件监听 (sandbox.proxy as any).addEventListener = ( type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions ) => { (sandbox as any).eventListeners.push({ type, listener, options }); return rawAddEventListener.call(window, type, listener, options); }; }CSS 样式污染防御：严格沙箱与工程约束
相比 JS 变量污染，CSS 的全局扩散（例如子应用定义了.btn { color: red; }破坏了主应用按钮）更为隐蔽。
目前主流的防御手段有以下三种：
- Shadow DOM（严格沙箱）：
- 优点：天然基于浏览器底层标准进行绝对样式隔离，外部样式与内部样式互不干扰。
- 缺点：各类 UI 组件库（如 Ant Design / Element Plus）的弹出层 Modal、Select 下拉框通常默认使用
document.body.appendChild挂载到根节点，脱离了 Shadow 容器后导致样式全丢，适配成本高昂。
- 运行时动态添加命名空间（Scoped CSS）：
qiankun 的experimentalStyleIsolation方案，通过正则为子应用的所有 CSS 规则自动前缀加上div[data-qiankun="app-name"]选择器。 - 工程化编译期约束：
通过 Tailwind CSS 的 prefix 配置、CSS Modules 或 PostCSS 插件在打包构建阶段对 class 进行唯一哈希化，这是目前大型跨团队合作中性价比最高且最稳妥的方案。
建立纵深防御的沙箱体系，微前端才能在保证业务团队敏捷交付的同时，守住主应用的稳定性底线。
