A brief discussion on several ways to implement front-end JS sandbox

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

class SandboxWindow {
    /**
     * Constructor * @param {*} context The object to be shared * @param {*} frameWindow The window of the iframe
     */
    constructor(context, frameWindow) {
        
        return new Proxy(frameWindow, {
            get(target, name) {
                if (name in context) { // Use shared objects first return context[name];
                }
                return target[name];
            },
            set(target, name, value) {
                if (name in context) { // Modify the value of the shared object return context[name] = value;
                }
                target[name] = value;
            }
        })
    }
}

// Variables that need to be shared globally const context = { document:window.document, history:window.history }

// Create a sandbox const newSandboxWindow = new SandboxWindow(context, sandboxGlobal); 

// Determine whether the object on the sandbox is equal to the global object console.log('equal',newSandboxWindow.document === window.document)

newSandboxWindow.abc = '1'; //Add properties to the sandbox console.log(window.abc); //View properties globally console.log(newSandboxWindow.abc) //View properties on the sandbox

class DiffSandbox {
  constructor(name) {
    this.name = name;
    this.modifyMap = {}; //Store modified properties this.windowSnapshot = {};
  }
  active() {
    // Cache active state sandbox 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]) {
        //Record changes this.modifyMap[item] = window[item];
        // Restore window
        window[item] = this.windowSnapshot[item];
      }
    }
  }
}

const diffSandbox = new DiffSandbox('diff sandbox');
diffSandbox.active(); // Activate the sandbox window.a = '1'
console.log('Open sandbox:',window.a);
diffSandbox.inactive(); //Deactivate sandbox console.log('Deactivate sandbox:', window.a);
diffSandbox.active(); // Reactivate console.log('Activate again', window.a);

// Public method to modify window properties const updateWindowProp = (prop, value, isDel) => {
    if (value === undefined || isDel) {
        delete window[prop];
    } else {
        window[prop] = value;
    }
}

class ProxySandbox {

    active() {
        // Restore the sandbox based on the record this.currentUpdatedPropsValueMap.forEach((v, p) => updateWindowProp(p, v));
    }
    inactive() {
        // 1 Restore the properties modified during the sandbox to the original properties this.modifiedPropsMap.forEach((v, p) => updateWindowProp(p, v));
        // 2 Eliminate the global variables added during the sandbox this.addedPropsMap.forEach((_, p) => updateWindowProp(p, undefined, true));
    }

    constructor(name) {
        this.name = name;
        this.proxy = null;
        //Store the newly added global variables this.addedPropsMap = new Map(); 
        //Store global variables updated during the sandbox this.modifiedPropsMap = new Map();
        // There are new and modified global variables, which are used when the sandbox is activated 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)) {
                    // If there is no property on the window, record it in the newly added property // debugger;
                    addedPropsMap.set(prop, value);
                } else if (!modifiedPropsMap.has(prop)) {
                    // If the current window object has this property and has not been updated, record the initial value of this property on the window const originalValue = window[prop];
                    modifiedPropsMap.set(prop, originalValue);
                }
                // Record the modified properties and the modified values ​​currentUpdatedPropsValueMap.set(prop, value);
                // Set the value to the global window updateWindowProp(prop, value);
                return true;
            },
            get(target, prop) {
                return window[prop];
            },
        });
        this.proxy = proxy;
    }
}


const newSandBox = new ProxySandbox('Proxy Sandbox');
const proxyWindow = newSandBox.proxy;
proxyWindow.a = '1'
console.log('Open sandbox:', proxyWindow.a, window.a);
newSandBox.inactive(); //Deactivate sandbox console.log('Deactivate sandbox:', proxyWindow.a, window.a);
newSandBox.active(); //Deactivate sandbox console.log('Reactivate sandbox:', proxyWindow.a, window.a);

class MultipleProxySandbox {

    active() {
        this.sandboxRunning = true;
    }
    inactive() {
        this.sandboxRunning = false;
    }

    /**
     * Constructor * @param {*} name sandbox name * @param {*} context shared 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) => {
                // Give priority to shared objects if (Object.keys(context).includes(name)) {
                    return context[name];
                }
                return target[name];
            }
        })
        this.proxy = proxy;
    }
}

const context = { document: window.document };

const newSandBox1 = new MultipleProxySandbox('Proxy Sandbox 1', context);
newSandBox1.active();
const proxyWindow1 = newSandBox1.proxy;

const newSandBox2 = new MultipleProxySandbox('Proxy Sandbox 2', context);
newSandBox2.active();
const proxyWindow2 = newSandBox2.proxy;
console.log('Are shared objects equal?', window.document === proxyWindow1.document, window.document === proxyWindow2.document);

proxyWindow1.a = '1'; // Set the value of proxy 1 proxyWindow2.a = '2'; // Set the value of proxy 2 window.a = '3'; // Set the value of window console.log('Print output value', proxyWindow1.a, proxyWindow2.a, window.a);


newSandBox1.inactive(); newSandBox2.inactive(); // Both sandboxes are inactivated proxyWindow1.a = '4'; // Set the value of proxy1 proxyWindow2.a = '4'; // Set the value of proxy2 window.a = '4'; // Set the value of window console.log('The value printed after deactivation', proxyWindow1.a, proxyWindow2.a, window.a);

newSandBox1.active(); newSandBox2.active(); // Activate again proxyWindow1.a = '4'; // Set the value of proxy 1 proxyWindow2.a = '4'; // Set the value of proxy 2 window.a = '4'; // Set the value of window console.log('The value printed after deactivation', proxyWindow1.a, proxyWindow2.a, window.a);