快捷導(dǎo)航

淺談前端JS沙箱實(shí)現(xiàn)的幾種方式

更新時間：2021年07月06日 11:36:03 作者：杰出D

在微前端領(lǐng)域當(dāng)中，沙箱是很重要的一件事情。本文就淺談前端JS沙箱實(shí)現(xiàn)的幾種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在微前端領(lǐng)域當(dāng)中，沙箱是很重要的一件事情。像微前端框架single-spa沒有實(shí)現(xiàn)js沙箱，我們在構(gòu)建大型微前端應(yīng)用的時候，很容易造成一些變量的沖突，對應(yīng)用的可靠性面臨巨大的風(fēng)險(xiǎn)。在微前端當(dāng)中，有一些全局對象在所有的應(yīng)用中需要共享，如document,location,等對象。子應(yīng)用開發(fā)的過程中可能是多個團(tuán)隊(duì)在做，很難約束他們使用全局變量。有些頁面可能會有多個不同的子應(yīng)用，需要我們支持多沙箱，每個沙箱需要有加載，卸載，在恢復(fù)的能力。

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

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

let iframe  = document.createElement('iframe',{src:'about:blank'});
document.body.appendChild(iframe);
const sandboxGlobal = iframe.contentWindow;

注意：只有同域的ifame才能取出對應(yīng)的contentWindow, iframe的src設(shè)置為about:blank,可以保證一定是同域的，也不會發(fā)生資源加載，參考iframe src

在前言中我們提到，微前端除了有一個隔離的window環(huán)境外，其實(shí)還需要共享一些全局對象,這時候我們可以用代理去實(shí)現(xiàn)。下面我們通過代碼看下

class SandboxWindow {
    /**
     * 構(gòu)造函數(shù)
     * @param {*} context 需要共享的對象
     * @param {*} frameWindow iframe的window
     */
    constructor(context, frameWindow) {
        
        return new Proxy(frameWindow, {
            get(target, name) {
                if (name in context) { // 優(yōu)先使用共享對象
                    return context[name];
                }
                return target[name];
            },
            set(target, name, value) {
                if (name in context) { // 修改共享對象的值
                    return context[name] = value;
                }
                target[name] = value;
            }
        })
    }
}

// 需要全局共享的變量
const context = { document:window.document, history: window.history }

// 創(chuàng)建沙箱
const newSandboxWindow = new SandboxWindow(context, sandboxGlobal); 

// 判斷沙箱上的對象和全局對象是否相等
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í)例，可以同時存在多個獨(dú)立的微應(yīng)用同時運(yùn)行

diff方式實(shí)現(xiàn)沙箱

在不支持代理的瀏覽器中，我們可以通過diff的方式實(shí)習(xí)沙箱。在應(yīng)用運(yùn)行的時候保存一個快照window對象，將當(dāng)前window對象的全部屬性都復(fù)制到快照對象上，子應(yīng)用卸載的時候?qū)indow對象修改做個diff，將不同的屬性用個modifyMap保存起來，再次掛載的時候再加上這些修改的屬性。代碼如下：

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)對象的劫持?；緦?shí)錄也是通過window對象的修改進(jìn)行記錄，在卸載時刪除這些記錄，在應(yīng)用再次激活時恢復(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();
        // 存在新增和修改的全局變量，在沙箱激活的時候使用
        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對象有該屬性，且未更新過，則記錄該屬性在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é)果

這種方式同一時刻只能有一個激活的沙箱，否則全局對象上的變量會有兩個以上的沙箱更新，造成全局變量沖突。

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

在單實(shí)例的場景總，我們的fakeWindow是一個空的對象，其沒有任何儲存變量的功能，微應(yīng)用創(chuàng)建的變量最終實(shí)際都是掛載在window上的，這就限制了同一時刻不能有兩個激活的微應(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)先使用共享對象
                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'; // 設(shè)置代理1的值
proxyWindow2.a = '2'; // 設(shè)置代理2的值
window.a = '3';  // 設(shè)置window的值
console.log('打印輸出的值', proxyWindow1.a, proxyWindow2.a, window.a);


newSandBox1.inactive(); newSandBox2.inactive(); // 兩個沙箱都失活

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é)果如下：