qiankun 的 JS 沙箱隔离机制已关闭评论
7 次浏览

A+

所属分类：Web前端

摘要

想象一下🧐当一个应用（比如应用 A）加载时，可能会对 window 对象的属性进行修改或添加。如果不加控制，这些修改会影响到之后加载的其他应用（比如应用 B），就会导致属性读写冲突

便宜好用的国外VPS推荐

为什么需要JS沙箱

想象一下🧐

当一个应用（比如应用 A）加载时，可能会对 window 对象的属性进行修改或添加。如果不加控制，这些修改会影响到之后加载的其他应用（比如应用 B），就会导致属性读写冲突

所以！对于各应用的 js文件来说，就需要一个独立的环境来执行，防止 window 全局对象发生属性读写冲突，这个独立的执行环境就叫做 JS沙箱

乾坤沙箱

乾坤目前存在三种 JS隔离机制，分别是 SnapshotSandbox、LegacySandbox 和 ProxySandbox

SnapshotSandbox（快照沙箱）
这是乾坤最早期的沙箱机制，在每次应用激活和失活时遍历 window 对象的所有属性，记录并恢复其状态。
性能很差，浪费内存；优点是可以兼容不支持 Proxy 的旧版浏览器
LegacySandbox（单应用代理沙箱）
在 SnapshotSandbox 基础上进行优化的一种沙箱机制，通过 ES6 的Proxy 对 window 对象进行更高效的代理。
然而，它仍会读写 window 对象，存在全局污染的问题；并且只能支持单个微应用的运行，意味着在一个页面上不能同时运行多个微应用
事实上，LegacySandbox 在未来应该会消失，逐渐被能够同时支持多个微应用的 ProxySandbox 所取代
ProxySandbox（多应用代理沙箱）
是乾坤最先进的一种 JS沙箱隔离机制，通过 Proxy 对象为每个微应用创建了一个独立的虚拟 window。不会操作 window 对象，不存在全局污染的问题；而且在同一页面上也支持多个微应用的同时运行
缺点则是不兼容不支持 proxy 旧版浏览器

SnapshotSandbox（快照沙箱）

这是乾坤最早期的沙箱机制，其主要目的是通过记录和恢复 window 对象的状态，确保每个微应用在激活和失活时都能够拥有独立的环境

这里我们实现一个简单的快照沙箱机制，用于隔离不同微应用对全局 window 对象的修改，对应乾坤的源代码可以看这里 - SnapshotSandbox源代码

工作原理💯

当沙箱激活时，保存当前 window 的状态到 windowSnapShot，然后恢复到上次失活前的状态（从 modifyPropsMap 中读取）

当沙箱失活时，记录所有对 window 对象的修改（与 windowSnapShot 的差异），并将 window 恢复到最初的快照状态

class SnapshotSandbox {   constructor() {     this.windowSnapShot = {}; // 存储 window 对象的初始快照     this.modifyPropsMap = {}; // 存储全局哪些属性被修改了   }   // 激活   active() {     this.windowSnapShot = {};     // 记录应用 A window 初始状态     Object.keys(window).forEach(prop => {       this.windowSnapShot[prop] = window[prop]     })     // 恢复到应用 A 上次失活之前的状态     Object.keys(this.modifyPropsMap).forEach(prop => {       window[prop] = this.modifyPropsMap[prop]     })   }   // 失活   inactive() {     this.modifyPropsMap = {}     Object.keys(window).forEach(prop => {       if (window[prop] !== this.windowSnapShot[prop]) {         this.modifyPropsMap[prop] = window[prop]; // 记录应用A 所做的所有修改         window[prop] = this.windowSnapShot[prop]; // 将 window 恢复到最初状态       }     })   } } let sandbox = new SnapshotSandbox(); sandbox.active(); window.a = 100; window.b = 200; sandbox.inactive(); console.log(window.a, window.b) sandbox.active(); console.log(window.a, window.b)

性能很差， 因为需要在每次应用激活和失活时遍历 window 对象的所有属性来记录和恢复其状态。在属性较多或频繁切换应用的情况下，性能瓶颈尤为明显。
浪费内存， 保存 window 对象的完整状态会占用大量内存
优点是可以兼容不支持 Proxy 的旧版浏览器

总的来说，快照沙箱通过拍摄 window 对象的快照来实现状态的隔离，虽然简单有效，但存在性能和内存方面的不足，适用于对浏览器兼容性有要求的场景

LegacySandbox（单应用代理沙箱）

是在 SnapshotSandbox 基础上优化的一种沙箱机制。它利用 ES6 引入的 Proxy 特性来提高性能，并实现类似于快照沙箱的功能

这里我们实现一个简单的单应用代理沙箱机制，对应乾坤的源代码可以看这里 - LegacySandbox源代码

工作原理💯

创建一个 fakeWindow 对象，并使用 Proxy 对其进行代理，在 set 拦截器中，addedPropsMap 记录新添加的属性，modifyPropsMap 记录被修改的属性原始值，currentPropsMap 记录所有被添加修改的属性最新值

当沙箱激活时，恢复到上次失活前的状态（从 currentPropsMap 中读取）

当沙箱失活时，还原修改前的属性值并删除新添加的属性，将 window 恢复到最初状态（从 modifyPropsMap、addedPropsMap 中读取）

class LegacySandbox {   constructor() {     this.modifyPropsMap = new Map() // 存储被修改过的属性原始值     this.addedPropsMap = new Map() // 存储新添加的属性值     this.currentPropsMap = new Map() // 存储所有被修改或新添加的属性最新值      // 创建一个 fakeWindow 对象，并使用 Proxy 对其进行代理     const fakeWindow = Object.create(null)     const proxy = new Proxy(fakeWindow, {       get: (target, key, recevier) => {         return window[key]       },       set: (target, key, value) => {         if (!window.hasOwnProperty(key)) {           this.addedPropsMap.set(key, value) // 新添加的属性         } else if (!this.modifyPropsMap.has(key)) {           this.modifyPropsMap.set(key, window[key]) // 被修改的属性原始值         }         this.currentPropsMap.set(key, value) // 所有的添加修改操作都存储一份最新值         window[key] = value       },     })     this.proxy = proxy   }   // 设置 window 对象的属性   setWindowProp(key, value) {     if (value == undefined) {       delete window[key]     } else {       window[key] = value     }   }   // 激活沙箱   active() {     // 恢复到应用 A 上次失活之前的状态     this.currentPropsMap.forEach((value, key) => {       this.setWindowProp(key, value)     })   }   // 失活沙箱   inactive() {     // 被修改的属性重置为原始值     this.modifyPropsMap.forEach((value, key) => {       this.setWindowProp(key, value)     })     // 移除新添加的属性     this.addedPropsMap.forEach((value, key) => {       this.setWindowProp(key, undefined)     })   } } let sandbox = new LegacySandbox() sandbox.proxy.a = 100 console.log(window.a, sandbox.proxy.a) sandbox.inactive() console.log(window.a, sandbox.proxy.a) sandbox.active() console.log(window.a, sandbox.proxy.a)

性能优化：通过 Proxy 对 window 对象进行代理，避免了遍历 window 的性能开销
全局污染：尽管使用了 Proxy，LegacySandbox 依然在全局 window 上进行操作，还是会污染全局的 window
单应用支持：和 SnapshotSandbox 一样，LegacySandbox 仅支持单个微应用的运行，无法在同一页面同时隔离多个微应用

事实上，LegacySandbox 在未来应该会消失，逐渐被能够同时支持多个微应用的 ProxySandbox 所取代

ProxySandbox（多应用代理沙箱）

ProxySandbox 也是一种基于 Proxy 对象实现的沙箱机制，它能够支持在同一页面上运行多个微应用，同时保证每个应用对全局环境（window 对象）的修改是隔离的

这里我们实现一个简单的多应用代理沙箱机制，对应乾坤的源代码可以看这里 - ProxySandbox源代码

工作原理💯

创建一个 fakeWindow 对象，并使用 Proxy 对其进行代理

当沙箱激活时，所有的修改都被限制在 fakeWindow 内，而不影响真实的 window 对象

当沙箱失活时，将 this.running 设置为 false，沙箱不再拦截修改操作

class ProxySandbox {   constructor() {     this.running = false     // 使用 Proxy 对 fakeWindow 进行代理     const fakeWindow = Object.create(null)     this.proxy = new Proxy(fakeWindow, {       get: (target, key) => {         return key in target ? target[key] : window[key]       },       set: (target, key, value) => {         if (this.running) {           target[key] = value // 将修改操作应用到 fakeWindow 上，而不是真实的 window 对象         }         return true       },     })   }   active() {     if (!this.running) this.running = true   }   inactive() {     this.running = false   } } let sandbox1 = new ProxySandbox() let sandbox2 = new ProxySandbox() sandbox1.active() sandbox2.active() sandbox1.proxy.a = 100 sandbox2.proxy.a = 100  console.log(sandbox1.proxy.a, sandbox2.proxy.a) sandbox1.inactive() sandbox2.inactive() sandbox1.proxy.a = 200 sandbox2.proxy.a = 200 console.log(sandbox1.proxy.a, window.a) console.log(sandbox2.proxy.a, window.a)