フロントエンドJSサンドボックスを実装するいくつかの方法についての簡単な説明

iframe を document.createElement('iframe',{src:'about:blank'}) に設定します。
document.body.appendChild(iframe);
const sandboxGlobal = iframe.contentWindow;

クラス SandboxWindow {
    /**
     * コンストラクタ * @param {*} context 共有するオブジェクト * @param {*} frameWindow iframeのウィンドウ
     */
    コンストラクタ(コンテキスト、フレームウィンドウ) {
        
        新しいProxy(frameWindow, { を返す
            get(ターゲット、名前) {
                if (name in context) { // 最初に共有オブジェクトを使用します return context[name];
                }
                ターゲット[名前]を返します。
            },
            set(ターゲット、名前、値) {
                if (name in context) { // 共有オブジェクトの値を変更します return context[name] = value;
                }
                ターゲット[名前] = 値;
            }
        })
    }
}

// グローバルに共有する必要がある変数 const context = { document:window.document, history:window.history }

// サンドボックスを作成します。const newSandboxWindow = new SandboxWindow(context, sandboxGlobal); 

// サンドボックス上のオブジェクトがグローバルオブジェクトと等しいかどうかを判断します console.log('equal',newSandboxWindow.document === window.document)

newSandboxWindow.abc = '1'; // サンドボックスにプロパティを追加 console.log(window.abc); // プロパティをグローバルに表示 console.log(newSandboxWindow.abc) // サンドボックス上のプロパティを表示

クラス DiffSandbox {
  コンストラクタ(名前) {
    this.name = 名前;
    this.modifyMap = {}; // 変更されたプロパティを保存します。this.windowSnapshot = {};
  }
  アクティブ（） {
    // アクティブな状態のサンドボックスをキャッシュします this.windowSnapshot = {};
    for (ウィンドウ内のconst項目) {
      this.windowSnapshot[item] = window[item];
    }

    Object.keys(this.modifyMap).forEach(p => {
      ウィンドウ[p] = this.modifyMap[p];
    })

  }

  非アクティブ（）{
    for (ウィンドウ内のconst項目) {
      if (this.windowSnapshot[item] !== window[item]) {
        //変更を記録する this.modifyMap[item] = window[item];
        // ウィンドウを復元
        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);

// ウィンドウのプロパティを変更するパブリックメソッド const updateWindowProp = (prop, value, isDel) => {
    if (値 === 未定義 || isDel) {
        ウィンドウ[prop]を削除します。
    } それ以外 {
        window[prop] = 値;
    }
}

クラス ProxySandbox {

    アクティブ（） {
        // レコードに基づいてサンドボックスを復元します this.currentUpdatedPropsValueMap.forEach((v, p) => updateWindowProp(p, v));
    }
    非アクティブ（）{
        // 1 サンドボックス中に変更されたプロパティを元のプロパティに復元します this.modifiedPropsMap.forEach((v, p) => updateWindowProp(p, v));
        // 2 サンドボックス中に追加されたグローバル変数を削除します。this.addedPropsMap.forEach((_, p) => updateWindowProp(p, undefined, true));
    }

    コンストラクタ(名前) {
        this.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 = 新しいProxy(fakeWindow, {
            set(ターゲット、プロパティ、値) {
                if (!window.hasOwnProperty(prop)) {
                    // ウィンドウにプロパティがない場合、新しく追加されたプロパティを // デバッガーに記録します。
                    追加されたPropsMap.set(prop, value);
                } そうでない場合 (!modifiedPropsMap.has(prop)) {
                    // 現在のウィンドウ オブジェクトにこのプロパティがあり、更新されていない場合は、ウィンドウのこのプロパティの初期値を記録します。const originalValue = window[prop];
                    プロパティを元の値に設定します。
                }
                // 変更されたプロパティと変更された値を記録します currentUpdatedPropsValueMap.set(prop, value);
                // グローバル ウィンドウに値を設定します updateWindowProp(prop, value);
                true を返します。
            },
            get(ターゲット、プロパティ) {
                window[prop]を返します。
            },
        });
        this.proxy = プロキシ;
    }
}


const newSandBox = 新しい ProxySandbox('プロキシサンドボックス');
const proxyWindow = newSandBox.proxy;
プロキシウィンドウ.a = '1'
console.log('サンドボックスを開きます:', proxyWindow.a, window.a);
newSandBox.inactive(); //サンドボックスを非アクティブ化 console.log('サンドボックスを非アクティブ化:', proxyWindow.a, window.a);
newSandBox.active(); //サンドボックスを非アクティブ化 console.log('サンドボックスを再アクティブ化:', proxyWindow.a, window.a);

クラスMultipleProxySandbox {

    アクティブ（） {
        this.sandboxRunning = true;
    }
    非アクティブ（）{
        this.sandboxRunning = false;
    }

    /**
     * コンストラクタ * @param {*} name サンドボックス名 * @param {*} context 共有コンテキスト * @returns 
     */
    コンストラクタ(名前、コンテキスト = {}) {
        this.name = 名前;
        this.proxy = null;
        const fakeWindow = Object.create({});
        const proxy = 新しいProxy(fakeWindow, {
            設定: (ターゲット、名前、値) => {
                （this.sandboxRunning）の場合{
                    if (Object.keys(context).includes(name)) {
                        コンテキスト[名前] = 値;
                    }
                    ターゲット[名前] = 値;
                }
            },
            取得: (ターゲット、名前) => {
                // 共有オブジェクトを優先する if (Object.keys(context).includes(name)) {
                    context[name]を返します。
                }
                ターゲット[名前]を返します。
            }
        })
        this.proxy = プロキシ;
    }
}

const コンテキスト = { ドキュメント: window.document };

const newSandBox1 = new MultipleProxySandbox('プロキシサンドボックス1', context);
新しいサンドボックス1.アクティブ();
定数 proxyWindow1 = newSandBox1.proxy;

const newSandBox2 = new MultipleProxySandbox('プロキシサンドボックス2', コンテキスト);
新しいサンドボックス2.アクティブ();
const proxyWindow2 = newSandBox2.proxy;
console.log('共有オブジェクトは等しいですか?', window.document === proxyWindow1.document, window.document === proxyWindow2.document);

proxyWindow1.a = '1'; // プロキシ 1 の値を設定します proxyWindow2.a = '2'; // プロキシ 2 の値を設定します window.a = '3'; // ウィンドウの値を設定します console.log('出力値を印刷', proxyWindow1.a, proxyWindow2.a, window.a);


newSandBox1.inactive(); newSandBox2.inactive(); // 両方のサンドボックスが非アクティブ化されています proxyWindow1.a = '4'; // proxy1 の値を設定します proxyWindow2.a = '4'; // proxy2 の値を設定します window.a = '4'; // ウィンドウの値を設定します console.log('非アクティブ化後に印刷された値', proxyWindow1.a, proxyWindow2.a, window.a);

newSandBox1.active(); newSandBox2.active(); // 再度アクティブ化 proxyWindow1.a = '4'; // プロキシ 1 の値を設定 proxyWindow2.a = '4'; // プロキシ 2 の値を設定 window.a = '4'; // ウィンドウの値を設定 console.log('非アクティブ化後に印刷された値', proxyWindow1.a, proxyWindow2.a, window.a);