如何实现一个前端沙箱系统？ ✅

答案

一、概览

前端沙箱 = JS 执行隔离 + DOM/CSS 隔离 + 资源/网络隔离。以 Proxy/with/new Function 构造运行时沙箱，配合 Shadow DOM/CSS Modules 与 URL/Fetch 策略，适配微前端多实例场景。

---

二、目标

1. 防止变量与原型链污染；避免 top/parent/window/self 逃逸。
2. 样式作用域隔离，不互相影响；事件与全局监听可回收。
3. 多实例并存，激活/卸载需可恢复（快照/代理）。

---

三、方案对比

• SnapshotSandbox：低版本兼容，遍历 window 记录/还原，简单但会污染 window，性能一般。
• LegacyProxy：单实例代理真实 window，记录变更，激活/卸载时切换，性能较好但仍操作 window。
• ProxySandbox（多例）：fakeWindow + Proxy，避免污染，支持并行微应用，推荐。

---

四、CSS/DOM 隔离

• Shadow DOM/Scoped 样式；CSS Modules/命名空间；动态样式表注入与清理。
• DOM 事件代理与解绑；MutationObserver 约束；Portal 与 z-index 约定。

---

五、资源与安全

• 资源劫持：document.createElement('script')、fetch 代理到沙箱上下文；白名单/前缀化。
• CSP 与 iframe sandbox（必要时）；原型链冻结/只读代理；Symbol.unscopables 处理。

---

延伸阅读

• sandbox

面试官视角:

• 关注逃逸场景（top/self/window）、DOM/CSS 污染、性能与兼容性权衡