目錄前言iframe實(shí)現(xiàn)沙箱diff方式實(shí)現(xiàn)沙箱基于代理(Proxy)實(shí)現(xiàn)單實(shí)例沙箱基于代理(Proxy)實(shí)現(xiàn)多實(shí)例沙箱結(jié)束語(yǔ)參考前言

在微前端領(lǐng)域當(dāng)中，沙箱是很重要的一件事情。像微前端框架single-spa沒(méi)有實(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)用開(kāi)發(fā)的過(guò)程中可能是多個(gè)團(tuán)隊(duì)在做，很難約束他們使用全局變量。有些頁(yè)面可能會(huì)有多個(gè)不同的子應(yīng)用，需要我們支持多沙箱，每個(gè)沙箱需要有加載，卸載，在恢復(fù)的能力。

iframe實(shí)現(xiàn)沙箱

在前端中，有一個(gè)比較重要的html標(biāo)簽iframe，實(shí)際上，我們可以通過(guò)iframe對(duì)象，把原生瀏覽器對(duì)象通過(guò)contentWindow取出來(lái)，這個(gè)對(duì)象天然具有所有的屬性，而且與主應(yīng)用的環(huán)境隔離。下面我們通過(guò)代碼看下

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)。下面我們通過(guò)代碼看下

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)行起來(lái)，看下結(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)沙箱

在不支持代理的瀏覽器中，我們可以通過(guò)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保存起來(lái)，再次掛載的時(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];// 還原windowwindow[item] = this.windowSnapshot[item]; } } }}const diffSandbox = new DiffSandbox(’diff沙箱’);diffSandbox.active(); // 激活沙箱window.a = ’1’console.log(’開(kāi)啟沙箱：’,window.a);diffSandbox.inactive(); //失活沙箱console.log(’失活沙箱：’, window.a);diffSandbox.active(); // 重新激活console.log(’再次激活’, window.a);

我們運(yùn)行一下，查看結(jié)果

這種方式也無(wú)法支持多實(shí)例，因?yàn)檫\(yùn)行期間所有的屬性都是保存在window上的。

基于代理(Proxy)實(shí)現(xiàn)單實(shí)例沙箱

在ES6當(dāng)中，我們可以通過(guò)代理(Proxy)實(shí)現(xiàn)對(duì)象的劫持?；緦?shí)錄也是通過(guò)window對(duì)象的修改進(jìn)行記錄，在卸載時(shí)刪除這些記錄，在應(yīng)用再次激活時(shí)恢復(fù)這些記錄，來(lái)達(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上沒(méi)有的屬性，記錄到新增屬性里 // debugger; addedPropsMap.set(prop, value);} else if (!modifiedPropsMap.has(prop)) { // 如果當(dāng)前window對(duì)象有該屬性，且未更新過(guò)，則記錄該屬性在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(’開(kāi)啟沙箱：’, 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í)例的場(chǎng)景總，我們的fakeWindow是一個(gè)空的對(duì)象，其沒(méi)有任何儲(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é)束語(yǔ)

以上是微前端比較常用的沙箱實(shí)現(xiàn)方式，想要在生產(chǎn)中使用，需要我們做很多的判斷和約束。下篇我們通過(guò)源碼看下微前端框架qiankun是怎么實(shí)現(xiàn)沙箱的。上面的代碼在github，如需查看，請(qǐng)移步j(luò)s-sandbox

參考

iframe src ES6 Proxy

到此這篇關(guān)于淺談前端JS沙箱實(shí)現(xiàn)的幾種方式的文章就介紹到這了,更多相關(guān)JS 沙箱內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！