Eine kurze Diskussion über verschiedene Möglichkeiten zur Implementierung einer Front-End-JS-Sandbox

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

Klasse SandboxWindow {
    /**
     * Konstruktor * @param {*} context Das zu teilende Objekt * @param {*} frameWindow Das Fenster des Iframes
     */
    Konstruktor(Kontext, Rahmenfenster) {
        
        gib einen neuen Proxy zurück (FrameWindow, {
            get(Ziel, Name) {
                if (Name im Kontext) { // Zuerst gemeinsam genutzte Objekte verwenden return context[Name];
                }
                Ziel [Name] zurückgeben;
            },
            setze(Ziel, Name, Wert) {
                if (Name im Kontext) { // Ändere den Wert des gemeinsam genutzten Objekts return context[Name] = Wert;
                }
                Ziel[Name] = Wert;
            }
        })
    }
}

// Variablen, die global geteilt werden müssen const context = { document:window.document, history:window.history }

// Eine Sandbox erstellen const newSandboxWindow = new SandboxWindow(context, sandboxGlobal); 

// Bestimmen Sie, ob das Objekt in der Sandbox dem globalen Objekt entspricht console.log('equal',newSandboxWindow.document === window.document)

newSandboxWindow.abc = '1'; //Eigenschaften zur Sandbox hinzufügen console.log(window.abc); //Eigenschaften global anzeigen console.log(newSandboxWindow.abc) //Eigenschaften in der Sandbox anzeigen

Klasse DiffSandbox {
  Konstruktor(Name) {
    dieser.name = Name;
    this.modifyMap = {}; //Geänderte Eigenschaften speichern this.windowSnapshot = {};
  }
  aktiv() {
    // Aktiven Status der Sandbox zwischenspeichern this.windowSnapshot = {};
    für (const item in window) {
      this.windowSnapshot[Element] = Fenster[Element];
    }

    Objekt.Schlüssel(diese.modifyMap).fürJeden(p => {
      Fenster[p] = diese.modifyMap[p];
    })

  }

  inaktiv() {
    für (const item in window) {
      wenn (this.windowSnapshot[item] !== window[item]) {
        //Änderungen aufzeichnen this.modifyMap[item] = window[item];
        // Fenster wiederherstellen
        Fenster[Element] = dieses.FensterSnapshot[Element];
      }
    }
  }
}

const diffSandbox = neue DiffSandbox('diff sandbox');
diffSandbox.active(); // Sandbox-Fenster aktivieren.a = '1'
console.log('Sandbox öffnen:',window.a);
diffSandbox.inactive(); //Sandbox deaktivieren console.log('Sandbox deaktivieren:', window.a);
diffSandbox.active(); // Reaktivieren console.log('Erneut aktivieren', window.a);

// Öffentliche Methode zum Ändern der Fenstereigenschaften const updateWindowProp = (prop, value, isDel) => {
    wenn (Wert === undefiniert || isDel) {
        Fenster löschen[Eigenschaft];
    } anders {
        Fenster[Eigenschaft] = Wert;
    }
}

Klasse ProxySandbox {

    aktiv() {
        // Stellen Sie die Sandbox basierend auf dem Datensatz this.currentUpdatedPropsValueMap.forEach((v, p) => updateWindowProp(p, v)) wieder her.
    }
    inaktiv() {
        // 1 Stellen Sie die während der Sandbox geänderten Eigenschaften auf die ursprünglichen Eigenschaften zurück. this.modifiedPropsMap.forEach((v, p) => updateWindowProp(p, v));
        // 2 Eliminieren Sie die während der Sandbox hinzugefügten globalen Variablen this.addedPropsMap.forEach((_, p) => updateWindowProp(p, undefined, true));
    }

    Konstruktor(Name) {
        dieser.name = Name;
        dieser.proxy = null;
        //Speichern Sie die neu hinzugefügten globalen Variablen this.addedPropsMap = new Map(); 
        //Speichern Sie globale Variablen, die während der Sandbox aktualisiert wurden. this.modifiedPropsMap = new Map();
        // Es gibt neue und geänderte globale Variablen, die verwendet werden, wenn die Sandbox aktiviert wird. this.currentUpdatedPropsValueMap = new Map();

        const { addedPropsMap, currentUpdatedPropsValueMap, modifiedPropsMap } = dies;
        const fakeWindow = Objekt.create(null);
        const proxy = neuer Proxy(fakeWindow, {
            setze(Ziel, Eigenschaft, Wert) {
                wenn (!window.hasOwnProperty(prop)) {
                    // Wenn im Fenster keine Eigenschaft vorhanden ist, zeichnen Sie sie in der neu hinzugefügten Eigenschaft auf. // Debugger;
                    hinzugefügtPropsMap.set(Eigenschaft, Wert);
                } sonst wenn (!modifiedPropsMap.has(prop)) {
                    // Wenn das aktuelle Fensterobjekt diese Eigenschaft hat und nicht aktualisiert wurde, zeichnen Sie den Anfangswert dieser Eigenschaft im Fenster auf. const originalValue = window[prop];
                    geändertePropsMap.set(Eigenschaft, Originalwert);
                }
                // Die geänderten Eigenschaften und die geänderten Werte aufzeichnen currentUpdatedPropsValueMap.set(prop, value);
                //Setze den Wert auf das globale Fenster updateWindowProp(prop, value);
                gibt true zurück;
            },
            bekomme(Ziel, Eigenschaft) {
                Fenster zurückgeben[Eigenschaft];
            },
        });
        dieser.proxy = Proxy;
    }
}


const newSandBox = neue ProxySandbox('Proxy-Sandbox');
const proxyWindow = newSandBox.proxy;
ProxyWindow.a = "1"
console.log('Sandbox öffnen:', proxyWindow.a, window.a);
newSandBox.inactive(); //Sandbox deaktivieren console.log('Sandbox deaktivieren:', proxyWindow.a, window.a);
newSandBox.active(); //Sandbox deaktivieren console.log('Sandbox reaktivieren:', proxyWindow.a, window.a);

Klasse MultipleProxySandbox {

    aktiv() {
        dies.sandboxRunning = true;
    }
    inaktiv() {
        this.sandboxRunning = falsch;
    }

    /**
     * Konstruktor * @param {*} Name Sandbox-Name * @param {*} Kontext gemeinsamer Kontext * @returns 
     */
    Konstruktor(Name, Kontext = {}) {
        dieser.name = Name;
        dieser.proxy = null;
        const fakeWindow = Objekt.create({});
        const proxy = neuer Proxy(fakeWindow, {
            set: (Ziel, Name, Wert) => {
                wenn (this.sandboxRunning) {
                    wenn (Objekt.Schlüssel(Kontext).enthält(Name)) {
                        Kontext[Name] = Wert;
                    }
                    Ziel[Name] = Wert;
                }
            },
            get: (Ziel, Name) => {
                // Gemeinsam genutzten Objekten Priorität einräumen if (Object.keys(context).includes(name)) {
                    Kontext zurückgeben[Name];
                }
                Ziel [Name] zurückgeben;
            }
        })
        dieser.proxy = Proxy;
    }
}

const Kontext = { Dokument: Fenster.Dokument };

const newSandBox1 = neue MultipleProxySandbox('Proxy-Sandbox 1', Kontext);
newSandBox1.active();
const proxyWindow1 = newSandBox1.proxy;

const newSandBox2 = neue MultipleProxySandbox('Proxy-Sandbox 2', Kontext);
newSandBox2.active();
const proxyWindow2 = newSandBox2.proxy;
console.log('Sind gemeinsam genutzte Objekte gleich?', window.document === proxyWindow1.document, window.document === proxyWindow2.document);

proxyWindow1.a = „1“; // Den Wert von Proxy 1 festlegen proxyWindow2.a = „2“; // Den Wert von Proxy 2 festlegen window.a = „3“; // Den Wert des Fensters festlegen console.log(„Ausgabewert drucken“, proxyWindow1.a, proxyWindow2.a, window.a);


newSandBox1.inactive(); newSandBox2.inactive(); // Beide Sandboxen sind deaktiviert proxyWindow1.a = „4“; // Den Wert von Proxy1 festlegen proxyWindow2.a = „4“; // Den Wert von Proxy2 festlegen window.a = „4“; // Den Wert von Fenster festlegen console.log(„Der nach der Deaktivierung ausgegebene Wert“, proxyWindow1.a, proxyWindow2.a, window.a);

newSandBox1.active(); newSandBox2.active(); // Erneut aktivieren proxyWindow1.a = '4'; // Den Wert von Proxy 1 festlegen proxyWindow2.a = '4'; // Den Wert von Proxy 2 festlegen window.a = '4'; // Den Wert des Fensters festlegen console.log('Der nach der Deaktivierung ausgegebene Wert', proxyWindow1.a, proxyWindow2.a, window.a);