淺談前端JS沙箱實現的幾種方式
阿新 • • 發佈：2021-07-07
目錄
- 前言
- iframe實現沙箱
- diff方式實現沙箱
- 基於代理(Proxy)實現單例項沙箱
- 基於代理(Proxy)實現多例項沙箱
- 結束語
- 參考
前言
在微前端領域當中，沙箱是很重要的一件事情。像微前端框架single-spa沒有實現沙箱，我們在構建大型微前端應用的時候，很容易造成一些變數的衝突，對應用的可靠性面臨巨大的風險。在微前端當中，有一些全域性物件在所有的應用中需要共享，如document,location,等物件。子應用開發的過程中可能是多個團隊在做，很難約束他們使用全域性變數。有些頁面可能會有多個不同的子應用，需要我們支援多沙箱，每個沙箱需要有載入，解除安裝，在恢復的能力。
iframe實現沙箱
在前端中，有一個比較重要的html標籤iframe，實際上，我們可以通過iframe物件，把原生瀏覽器物件通過contentWindow取出來，這個物件天然具有所有的屬性，而且與主應用的環境隔離。下面我們通過程式碼看下
let iframe = document.createElement('iframe',{src:'about:blank'});
document.body.appendChild(iframe);
const sandboxGlobal = iframe.contentWindow;
注意：只有同域的ifame才能取出對應的contentWindow,iframe的src設定為about:blank,可以保證一定是同域的，也不會發生資源載入，參考iframe src
在前言中我們提到，微前端除了有一個隔離的window環境外，其實還需要共享一些全域性物件,這時候我們可以用代理去實現。下面我們通過程式碼看下
class SandboxWindow {
/**
* 建構函式
* @param {*} context 需要共享的物件
* @param {*} frameWindow iframe的window
*/
constructor(context,frameWindow) {
return new Proxy(frameWindow,{
get(target,name) {
if (name in context) { // 優先使用共享物件
return context[name];
}
CErXNoIB
我們執行起來，看下結果
以上我們利用iframe沙箱可以實現以下特性：
- 全域性變數隔離，如setTimeout、location、react不同版本隔離
- 路由隔離，應用可以實現獨立路由，也可以共享全域性路由
- 多例項，可以同時存在多個獨立的微應用同時執行
diff方式實現沙箱
在不支www.cppcns.com持代理的瀏覽器中，我們可以通過diff的方式實習沙箱。在應用執行的時候儲存一個快照window物件，將當前window物件的全部屬性都複製到快照物件上，子應用解除安裝的時候將window物件修改做個diff，將不同的屬性用個modifyMap儲存起來，再次掛載的時候再加上這些修改的屬性。程式碼如下：
class DiffSandbox {
constructor(name) {
this.name = name;
this.modifyMap = {}; // 存放修改的屬性
this.windowSnapshot = {};
}
active() {
// 快取active狀態的沙箱
this.windowSnapshot = {};
for (const item in window) {
this.windowSnapshot[item] = window[item];
}
Object.keys(this.modifyMap).forEach(p => {
window[p] = this.modifyMap[p];
})
}
inactive() {
for (const item in window) {
if (this.windowSnapshot[item] !== window[item]) {
// 記錄變更
this.modifyMap[item] = window[item];
// 還原window
window[item] = this.windowSnapshot[item];
}
}
}
}
const diffSandbox = new DiffSandbox('diff沙箱');
diffSandbox.active(); // 啟用沙箱
window.a = '1'
console.log('開啟沙箱：',window.a);
diffSandbox.inactive(); //失活沙箱
console.log('失活沙箱：',window.a);
diffSandbox.active(); // 重新啟用
console.log('再次啟用',window.a);
我們執行一下，檢視結果
這種方式也無法支援多例項，因為執行期間所有的屬性都是儲存在window上的。
基於代理(Proxy)實現單例項沙箱
在ES6當中，我們可以通過代理(Proxy)實現物件的劫持。基本實錄也是通過window物件的修改進行記錄，在解除安裝時刪除這些記錄，在應用再次啟用時恢復這些記錄，來達到模擬沙箱環境的目的。程式碼如下
// 修改window屬性的公共方法
const updateWindowProp = (prop,value,isDel) => {
if (value === undefined || isDel) {
delete window[prop];
} else {
window[prop] = value;
}
}
class ProxySandbox {
active() {
// 根據記錄還原沙箱
this.currentUpdatedPropsValueMap.forEach((v,p) => updateWindowProp(p,v));
}
inactive() {
// 1 將沙箱期間修改的屬性還原為原先的屬性
this.modifiedPropsMap.forEach((v,v));
// 2 將沙箱期間新增的全域性變數消除
this.addedPropsMap.forEach((_,undefined,true));
}
constructor(name) {
this.name = name;
this.proxy = null;
// 存放新增的全域性變數
this.addedPropsMap = new Map();
// 存放沙箱期間更新的全域性變數
this.modifiedPropsMap = new Map();
// 存在新增和修改的全域性變數，在沙箱啟用的時候使用
this.currentUpdatedPropsValueMap = new Map();
const { addedPropsMap,currentUpdatedPropsValueMap,modifiedPropsMap } = this;
const fakeWindow = Object.create(null);
const proxy = new Proxy(fakeWindow,{
set(target,prop,value) {
if (!window.hasOwnProperty(prop)) {
// 如果window上沒有的屬性，記錄到新增屬性裡
// debugger;
addedPropsMap.set(prop,value);
} else if (!modifiedPropsMap.has(prop)) {
// 如果當前window物件有該屬性，且未更新過，則記錄該屬性在window上的初始值
const originalValue = window[prop];
modifiedPropsMap.set(prop,originalValue);
}
// 記錄修改屬性以及修改後的值
currentUpdatedPropsValueMap.set(prop,value);
// 設定值到全域性window上
updateWindowProp(prop,value);
return true;
},get(target,prop) {
return window[prop];
},});
this.proxy = proxy;
}
}
const newSandBox = new ProxySandbox('代理沙箱');
const proxyWindow = newSandBox.proxy;
proxyWindow.a = '1'
console.log('開啟沙箱：',proxyWindow.a,window.a);
newSandBox.inactive(); //失活沙箱
console.log('失活沙箱：',window.a);
newSandBox.active(); //失活沙箱
console.log('重新啟用沙箱：',window.a);
我們執行程式碼，看下結果
這種方式同一時刻只能有一個啟用的沙箱，否則全域性物件上的變數會有兩個以上的沙箱更新，造成全域性變數衝突。
基於代理(Proxy)實現多例項沙箱
在單例項的場景總，我們的fakeWindow是一個空的物件，其沒有任何儲存變數的功能，微應用建立的變數最終實際都是掛載在window上的，這就限制了同一時刻不能有兩個啟用的微應用。
class MultipleProxySandbox {
active() {
this.sanCErXNoIBdboxRunning = true;
}
inactive() {
this.sandboxRunning = false;
}
/**
* 建構函式
* @param {*} name 沙箱名稱
* @param {*} context 共享的上下文
* @returns
*/
constructor(name,context = {}) {
this.name = name;
this.proxy = null;
const fakeWindow = Object.create({});
const proxy = new Proxy(fakeWindow,{
set: (target,value) => {
if (this.sandboxRunning) {
if (Object.keys(context).includes(name)) {
context[name] = value;
}
target[name] = value;
}
},get: (target,name) => {
// 優先使用共享物件
if (Object.keys(context).includes(name)) {
return context[name];
}
return target[name];
}
})
this.proxy = proxy;
}
}
const context = { document: window.document };
const newSandBox1 = new MultipleProxySandbox('代理沙箱1',context);
newSandBox1.active();
const proxyWindow1 = newSandBox1.proxy;
const newSandBox2 = new MultipleProxySandbox('代理沙箱2',context);
newSandBox2.active();
const proxyWindow2 = newSandBox2.proxy;
console.log('共享物件是否相等',window.document === proxyWindow1.document,window.document === proxyWindow2.document);
proxyWindow1.a = '1'; // 設定代理1的值
proxyWindow2.a = '2'; // 設定代理2的值
window.a = '3'; // 設定window的值
console.log('列印輸出的值',proxyWindow1.a,proxyWindow2.a,window.a);
newSandBox1.inactive(); newSandBox2.inactive(); // 兩個沙箱都失活
proxyWindow1.a = '4'; // 設定代理1的值
proxyWindow2.a = '4'; // 設定代理2的值
window.a = '4'; // 設定window的值
console.log('失活後列印輸出的值',window.a);
newSandBox1.active(); newSandBox2.active(); // 再次啟用
proxyWindow1.a = '4'; // 設定代理1的值
proxyWindow2.a = '4'; // 設定代理2的值
window.a = '4'; // 設定window的值
console.log('失活後列印輸出的值',window.a);
執行程式碼，結果如下：
這種方式同一時刻只能有一個啟用的多個沙箱，從而實現多例項沙箱。
結束語
以上是微前端比較常用的沙箱實現方式，想要在生產中使用，需要我們做很多的判斷和約束。下篇我們通過原始碼看下微前端框架qiankun是怎麼實現沙箱的。上面的程式碼在，如需檢視，請移步js-sandbox
參考
iframe src
ES6 Proxy
到此這篇關於淺談前端JS沙箱實現的幾種方式的文章就介紹到這了,更多相關JS 沙箱內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！