社區(qū)精選｜淺析微前端沙箱

const varBox = {};const fakeWindow = new Proxy(window, {  get(target, key) {    return varBox[key] || window[key];  },  set(target, key, value) {    varBox[key] = value;    return true;  },});
window.test = 1;

// 修改全局對象 window 方法const setWindowProp = (prop, value, isDel) => {    if (value === undefined || isDel) {        delete window[prop];    } else {        window[prop] = value;    }}
class Sandbox {    name;    proxy = null;
    // 沙箱期間新增的全局變量    addedPropsMap = new Map();
    // 沙箱期間更新的全局變量    modifiedPropsOriginalValueMap = new Map();
    // 持續(xù)記錄更新的(新增和修改的)全局變量的 map，用于在任意時刻做沙箱激活    currentUpdatedPropsValueMap = new Map();
    // 應(yīng)用沙箱被激活    active() {        // 根據(jù)之前修改的記錄重新修改 window 的屬性，即還原沙箱之前的狀態(tài)        this.currentUpdatedPropsValueMap.forEach((v, p) => setWindowProp(p, v));    }
    // 應(yīng)用沙箱被卸載    inactive() {        // 1 將沙箱期間修改的屬性還原為原先的屬性        this.modifiedPropsOriginalValueMap.forEach((v, p) => setWindowProp(p, v));        // 2 將沙箱期間新增的全局變量消除        this.addedPropsMap.forEach((_, p) => setWindowProp(p, undefined, true));    }
    constructor(name) {        this.name = name;        const fakeWindow = Object.create(null); // 創(chuàng)建一個原型為 null 的空對象        const { addedPropsMap, modifiedPropsOriginalValueMap, currentUpdatedPropsValueMap } = this;        const proxy = new Proxy(fakeWindow, {            set(_, prop, value) {                if(!window.hasOwnProperty(prop)) {                    // 如果 window 上沒有的屬性，記錄到新增屬性里                    addedPropsMap.set(prop, value);                } else if (!modifiedPropsOriginalValueMap.has(prop)) {                    // 如果當(dāng)前 window 對象有該屬性，且未更新過，則記錄該屬性在 window 上的初始值                    const originalValue = window[prop];                    modifiedPropsOriginalValueMap.set(prop, originalValue);                }
                // 記錄修改屬性以及修改后的值                currentUpdatedPropsValueMap.set(prop, value);
                // 設(shè)置值到全局 window 上                setWindowProp(prop,value);                console.log('window.prop', window[prop]);
                return true;            },            get(target, prop) {                return window[prop];            },        });        this.proxy = proxy;    }}
// 初始化一個沙箱const newSandBox = new Sandbox('app1');const proxyWindow = newSandBox.proxy;proxyWindow.test = 1;console.log(window.test, proxyWindow.test) // 1 1;
// 關(guān)閉沙箱newSandBox.inactive();console.log(window.test, proxyWindow.test); // undefined undefined;
// 重啟沙箱newSandBox.active();console.log(window.test, proxyWindow.test) // 1 1 ;

class Sandbox {    name;    constructor(name, context = {}) {        this.name = name;        const fakeWindow = Object.create({});
        return new Proxy(fakeWindow, {            set(target, name, value) {                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];                }                if (typeof target[name] === 'function' && /^[a-z]/.test(name)) {                    return target[name].bind && target[name].bind(target);                } else {                    return target[name];                }            }        });    }    //  ...}
/** * 注意這里的 context 十分關(guān)鍵，因為我們的 fakeWindow 是一個空對象，window 上的屬性都沒有， * 實際項目中這里的 context 應(yīng)該包含大量的 window 屬性， */
// 初始化2個沙箱，共享 doucment 與一個全局變量const context = { document: window.document, globalData: 'abc' };
const newSandBox1 = new Sandbox('app1', context);const newSandBox2 = new Sandbox('app2', context);
newSandBox1.test = 1;newSandBox2.test = 2;window.test = 3;
/** * 每個環(huán)境的私有屬性是隔離的 */console.log(newSandBox1.test, newSandBox2.test, window.test); // 1 2 3;
/** * 共享屬性是沙盒共享的，這里 newSandBox2 環(huán)境中的 globalData 也被改變了 */newSandBox1.globalData = '123';console.log(newSandBox1.globalData, newSandBox2.globalData); // 123 123;

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];    }  }}

class Sandbox {    private windowSnapshot    private modifyMap    activate: () => void;    deactivate: () => void;}
const sandbox = new Sandbox();sandbox.activate();// 執(zhí)行任意代碼sandbox.deactivate();

const iframe = document.createElement('iframe', { url: 'about:blank' });
const sandboxGlobal = iframe.contentWindow;sandbox(sandboxGlobal);

class SandboxWindow {    constructor(options, context, frameWindow) {        return new Proxy(frameWindow, {            set(target, name, value) {                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];                }
                if(typeof target[name] === 'function' && /^[a-z]/.test(name)) {                    return target[name].bind && target[name].bind(target);                } else {                    return target[name];                }            }        });    }    //  ...}
const iframe = document.createElement('iframe', { url: 'about:blank' });document.body.appendChild(iframe);const sandboxGlobal = iframe.contentWindow;// 需要全局共享的變量const context = { document: window.document, history: window.histroy };const newSandBoxWindow = new SandboxWindow({}, context, sandboxGlobal);// newSandBoxWindow.history 全局對象// newSandBoxWindow.abc 為 'abc' 沙箱環(huán)境全局變量// window.abc 為 undefined

const sr = new ShadowRealm();
// Sets a new global within the ShadowRealm onlysr.evaluate('globalThis.x = "my shadowRealm"');
globalThis.x = "root"; //
const srx = sr.evaluate('globalThis.x');
srx; // "my shadowRealm"x; // "root"

const sr = new ShadowRealm();
const redAdd = await sr.importValue('./inside-code.js', 'add');
let result = redAdd(2, 3);
console.assert(result === 5);

const vm = require('node:vm');
const x = 1;
const context = { x: 2 };vm.createContext(context); // Contextify the object.
const code = 'x += 40; var y = 17;';// `x` and `y` are global variables in the context.// Initially, x has the value 2 because that is the value of context.x.vm.runInContext(code, context);
console.log(context.x); // 42console.log(context.y); // 17
console.log(x); // 1; y is not defined.