淺談前端JS沙箱實(shí)現(xiàn)的幾種方式
前言
在微前端領(lǐng)域當(dāng)中，沙箱是很重要的一件事情。像微前端框架single-spa沒有實(shí)現(xiàn)js沙箱，我們?cè)跇?gòu)建大型微前端應(yīng)用的時(shí)候，很容易造成一些變量的沖突，對(duì)應(yīng)用的可靠性面臨巨大的風(fēng)險(xiǎn)。在微前端當(dāng)中，有一些全局對(duì)象在所有的應(yīng)用中需要共享，如document,location,等對(duì)象。子應(yīng)用開發(fā)的過程中可能是多個(gè)團(tuán)隊(duì)在做，很難約束他們使用全局變量。有些頁面可能會(huì)有多個(gè)不同的子應(yīng)用，需要我們支持多沙箱，每個(gè)沙箱需要有加載，卸載，在恢復(fù)的能力。
iframe實(shí)現(xiàn)沙箱
在前端中，有一個(gè)比較重要的html標(biāo)簽iframe，實(shí)際上，我們可以通過iframe對(duì)象，把原生瀏覽器對(duì)象通過contentWindow取出來，這個(gè)對(duì)象天然具有所有的屬性，而且與主應(yīng)用的環(huán)境隔離。下面我們通過代碼看下
let iframe = document.createElement('iframe',{src:'about:blank'});
document.body.appendChild(iframe);
const sandboxGlobal = iframe.contentWindow;
注意：只有同域的ifame才能取出對(duì)應(yīng)的contentWindow, iframe的src設(shè)置為about:blank,可以保證一定是同域的，也不會(huì)發(fā)生資源加載，參考iframe src
在前言中我們提到，微前端除了有一個(gè)隔離的window環(huán)境外，其實(shí)還需要共享一些全局對(duì)象,這時(shí)候我們可以用代理去實(shí)現(xiàn)。下面我們通過代碼看下
class SandboxWindow {
/**
* 構(gòu)造函數(shù)
* @param {*} context 需要共享的對(duì)象
* @param {*} frameWindow iframe的window
*/
constructor(context, frameWindow) {
return new Proxy(frameWindow, {
get(target, name) {
if (name in context) { // 優(yōu)先使用共享對(duì)象
return context[name];
}
return target[name];
},
set(target, name, value) {
if (name in context) { // 修改共享對(duì)象的值
return context[name] = value;
}
target[name] = value;
}
})
}
}
// 需要全局共享的變量
const context = { document:window.document, history: window.history }
// 創(chuàng)建沙箱
const newSandboxWindow = new SandboxWindow(context, sandboxGlobal);
// 判斷沙箱上的對(duì)象和全局對(duì)象是否相等
console.log('equal',newSandboxWindow.document === window.document)
newSandboxWindow.abc = '1'; //在沙箱上添加屬性
console.log(window.abc); // 在全局上查看屬性
console.log(newSandboxWindow.abc) //在沙箱上查看屬性
我們運(yùn)行起來，看下結(jié)果
以上我們利用iframe沙箱可以實(shí)現(xiàn)以下特性：
- 全局變量隔離，如setTimeout、location、react不同版本隔離
- 路由隔離，應(yīng)用可以實(shí)現(xiàn)獨(dú)立路由，也可以共享全局路由
- 多實(shí)例，可以同時(shí)存在多個(gè)獨(dú)立的微應(yīng)用同時(shí)運(yùn)行
diff方式實(shí)現(xiàn)沙箱
在不支持代理的瀏覽器中，我們可以通過diff的方式實(shí)習(xí)沙箱。在應(yīng)用運(yùn)行的時(shí)候保存一個(gè)快照window對(duì)象，將當(dāng)前window對(duì)象的全部屬性都復(fù)制到快照對(duì)象上，子應(yīng)用卸載的時(shí)候?qū)indow對(duì)象修改做個(gè)diff，將不同的屬性用個(gè)modifyMap保存起來，再次掛載的時(shí)候再加上這些修改的屬性。代碼如下：
class DiffSandbox {
constructor(name) {
this.name = name;
this.modifyMap = {}; // 存放修改的屬性
this.windowSnapshot = {};
}
active() {
// 緩存active狀態(tài)的沙箱
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);
我們運(yùn)行一下，查看結(jié)果
這種方式也無法支持多實(shí)例，因?yàn)檫\(yùn)行期間所有的屬性都是保存在window上的。
基于代理(Proxy)實(shí)現(xiàn)單實(shí)例沙箱
在ES6當(dāng)中，我們可以通過代理(Proxy)實(shí)現(xiàn)對(duì)象的劫持?；緦?shí)錄也是通過window對(duì)象的修改進(jìn)行記錄，在卸載時(shí)刪除這些記錄，在應(yīng)用再次激活時(shí)恢復(fù)這些記錄，來達(dá)到模擬沙箱環(huán)境的目的。代碼如下
// 修改window屬性的公共方法
const updateWindowProp = (prop, value, isDel) => {
if (value === undefined || isDel) {
delete window[prop];
} else {
window[prop] = value;
}
}
class ProxySandbox {
active() {
// 根據(jù)記錄還原沙箱
this.currentUpdatedPropsValueMap.forEach((v, p) => updateWindowProp(p, v));
}
inactive() {
// 1 將沙箱期間修改的屬性還原為原先的屬性
this.modifiedPropsMap.forEach((v, p) => updateWindowProp(p, v));
// 2 將沙箱期間新增的全局變量消除
this.addedPropsMap.forEach((_, p) => updateWindowProp(p, undefined, true));
}
constructor(name) {
this.name = name;
this.proxy = null;
// 存放新增的全局變量
this.addedPropsMap = new Map();
// 存放沙箱期間更新的全局變量
this.modifiedPropsMap = new Map();
// 存在新增和修改的全局變量，在沙箱激活的時(shí)候使用
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)) {
// 如果當(dāng)前window對(duì)象有該屬性，且未更新過，則記錄該屬性在window上的初始值
const originalValue = window[prop];
modifiedPropsMap.set(prop, originalValue);
}
// 記錄修改屬性以及修改后的值
currentUpdatedPropsValueMap.set(prop, value);
// 設(shè)置值到全局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('失活沙箱：', proxyWindow.a, window.a);
newSandBox.active(); //失活沙箱
console.log('重新激活沙箱：', proxyWindow.a, window.a);
我們運(yùn)行代碼，看下結(jié)果
這種方式同一時(shí)刻只能有一個(gè)激活的沙箱，否則全局對(duì)象上的變量會(huì)有兩個(gè)以上的沙箱更新，造成全局變量沖突。
基于代理(Proxy)實(shí)現(xiàn)多實(shí)例沙箱
在單實(shí)例的場景總，我們的fakeWindow是一個(gè)空的對(duì)象，其沒有任何儲(chǔ)存變量的功能，微應(yīng)用創(chuàng)建的變量最終實(shí)際都是掛載在window上的，這就限制了同一時(shí)刻不能有兩個(gè)激活的微應(yīng)用。
class MultipleProxySandbox {
active() {
this.sandboxRunning = true;
}
inactive() {
this.sandboxRunning = false;
}
/**
* 構(gòu)造函數(shù)
* @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, name, value) => {
if (this.sandboxRunning) {
if (Object.keys(context).includes(name)) {
context[name] = value;
}
target[name] = value;
}
},
get: (target, name) => {
// 優(yōu)先使用共享對(duì)象
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('共享對(duì)象是否相等', window.document === proxyWindow1.document, window.document === proxyWindow2.document);
proxyWindow1.a = '1'; // 設(shè)置代理1的值
proxyWindow2.a = '2'; // 設(shè)置代理2的值
window.a = '3'; // 設(shè)置window的值
console.log('打印輸出的值', proxyWindow1.a, proxyWindow2.a, window.a);
newSandBox1.inactive(); newSandBox2.inactive(); // 兩個(gè)沙箱都失活
proxyWindow1.a = '4'; // 設(shè)置代理1的值
proxyWindow2.a = '4'; // 設(shè)置代理2的值
window.a = '4'; // 設(shè)置window的值
console.log('失活后打印輸出的值', proxyWindow1.a, proxyWindow2.a, window.a);
newSandBox1.active(); newSandBox2.active(); // 再次激活
proxyWindow1.a = '4'; // 設(shè)置代理1的值
proxyWindow2.a = '4'; // 設(shè)置代理2的值
window.a = '4'; // 設(shè)置window的值
console.log('失活后打印輸出的值', proxyWindow1.a, proxyWindow2.a, window.a);
運(yùn)行代碼，結(jié)果如下：
這種方式同一時(shí)刻只能有一個(gè)激活的多個(gè)沙箱，從而實(shí)現(xiàn)多實(shí)例沙箱。
結(jié)束語
以上是微前端比較常用的沙箱實(shí)現(xiàn)方式，想要在生產(chǎn)中使用，需要我們做很多的判斷和約束。下篇我們通過源碼看下微前端框架qiankun是怎么實(shí)現(xiàn)沙箱的。上面的代碼在github，如需查看，請(qǐng)移步j(luò)s-sandbox
參考
到此這篇關(guān)于淺談前端JS沙箱實(shí)現(xiàn)的幾種方式的文章就介紹到這了,更多相關(guān)JS 沙箱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中令你抓狂的魔術(shù)變量...2006-11-11
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
impress.js 是國外一位開發(fā)者受 Prezi 啟發(fā)，采用 CSS3 與 JavaScript 語言完成的一個(gè)可供開發(fā)者使用的表現(xiàn)層框架(演示工具)。感興趣的朋友跟著小編一起學(xué)習(xí)吧2015-09-09
本篇文章是小編日常收集整理些javascript保留關(guān)鍵字相關(guān)知識(shí)匯總，需要的朋友參考下2015-12-12
js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲
本文主要介紹了js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲的實(shí)例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
Javarscript中模塊(module)、加載(load)與捆綁(bundle)詳解
這篇文章主要給大家介紹了關(guān)于Javarscript中模塊(module)、加載(load)與捆綁(bundle)的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
本文主要介紹了JavaScript中值類型和引用類型的區(qū)別，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了客戶端驗(yàn)證用戶名和密碼 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多選框全選操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實(shí)現(xiàn)的九種排序算法
這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)的九種排序算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03