JS沙箱sandbox的各种实现

Copy 
1// 监控执行代码
2function compileCode(src) {
3  src = `with (exposeObj){${src}}`;
4  return new Function("exposeObj", src);
5}
6// 代理对象
7function proxyObj(originObj) {
8  let exposeObj = new Proxy(originObj, {
9    has: (target, key) => {
10      if (["console", "Math", "Date"].indexOf(key) >= 0) {
11        return target[key];
12      }
13      if (!target.hasOwnProperty(key)) {
14        throw new Error(`${target}上不存在${key}`);
15      }
16      return target[key];
17    },
18  });
19  return exposeObj;
20}
21// 创建沙盒
22function createSandbox(src, obj) {
23  let proxy = proxyObj(obj);
24  compileCode(src).call(proxy, proxy);
25}
26
27const testObj = {
28  value: 1,
29  a: {
30    b: 2,
31  },
32  c: "3",
33};
34const c = "c";
35createSandbox(`value='32323';console.log(c);`, testObj);

Copy 
1class SnapshotSandBox {
2  constructor(name) {
3    this.modifyMap = {}; // 存放修改的属性
4    this.windowSnapshot = {};
5  }
6  active() {
7    // 缓存active状态的沙箱
8    this.windowSnapshot = {};
9    for (const item in window) {
10      this.windowSnapshot[item] = window[item];
11    }
12
13    Object.keys(this.modifyMap).forEach((p) => {
14      window[p] = this.modifyMap[p];
15    });
16  }
17  inactive() {
18    for (const item in window) {
19      if (this.windowSnapshot[item] !== window[item]) {
20        // 记录变更
21        this.modifyMap[item] = window[item];
22        // 还原window
23        window[item] = this.windowSnapshot[item];
24      }
25    }
26  }
27}
28window.a = "1";
29const diffSandbox = new SnapshotSandBox();
30diffSandbox.active(); // 激活沙箱
31debugger;
32window.a = "0";
33console.log("开启沙箱：", window.a);
34diffSandbox.inactive(); //失活沙箱
35debugger;
36console.log("失活沙箱：", window.a);
37diffSandbox.active(); // 重新激活
38debugger;
39console.log("再次激活", window.a);

Copy 
1class LegacySandBox {
2  addedPropsMapInSandbox = new Map();
3  modifiedPropsOriginalValueMapInSandbox = new Map();
4  currentUpdatedPropsValueMap = new Map();
5  proxyWindow;
6  setWindowProp(prop, value, toDelete = false) {
7    if (value === undefined && toDelete) {
8      delete window[prop];
9    } else {
10      window[prop] = value;
11    }
12  }
13  active() {
14    this.currentUpdatedPropsValueMap.forEach((value, prop) =>
15      this.setWindowProp(prop, value)
16    );
17  }
18  inactive() {
19    this.modifiedPropsOriginalValueMapInSandbox.forEach((value, prop) =>
20      this.setWindowProp(prop, value)
21    );
22    this.addedPropsMapInSandbox.forEach((_, prop) =>
23      this.setWindowProp(prop, undefined, true)
24    );
25  }
26  constructor() {
27    const fakeWindow = Object.create(null);
28    this.proxyWindow = new Proxy(fakeWindow, {
29      set: (target, prop, value, receiver) => {
30        const originalVal = window[prop];
31        if (!window.hasOwnProperty(prop)) {
32          this.addedPropsMapInSandbox.set(prop, value);
33        } else if (!this.modifiedPropsOriginalValueMapInSandbox.has(prop)) {
34          this.modifiedPropsOriginalValueMapInSandbox.set(prop, originalVal);
35        }
36        this.currentUpdatedPropsValueMap.set(prop, value);
37        window[prop] = value;
38      },
39      get: (target, prop, receiver) => {
40        return target[prop];
41      },
42    });
43  }
44}
45// 验证：
46let legacySandBox = new LegacySandBox();
47legacySandBox.active();
48legacySandBox.proxyWindow.city = "Beijing";
49console.log("window.city-01:", window.city);
50legacySandBox.inactive();
51console.log("window.city-02:", window.city);
52legacySandBox.active();
53console.log("window.city-03:", window.city);
54legacySandBox.inactive();
55// 输出：
56// window.city-01: Beijing
57// window.city-02: undefined
58// window.city-03: Beijing

Copy 
1class MultipleProxySandbox {
2  active() {
3    this.sandboxRunning = true;
4  }
5  inactive() {
6    this.sandboxRunning = false;
7  }
8  constructor() {
9    const rawWindow = window;
10    const fakeWindow = {};
11    const proxy = new Proxy(fakeWindow, {
12      set: (target, prop, value) => {
13        if (this.sandboxRunning) {
14          target[prop] = value;
15          return true;
16        }
17      },
18      get: (target, prop) => {
19        // 如果fakeWindow里面有，就从fakeWindow里面取，否则，就从外部的window里面取
20        let value = prop in target ? target[prop] : rawWindow[prop];
21        return value;
22      },
23    });
24    this.proxy = proxy;
25  }
26}
27
28const context = { document: window.document };
29
30const newSandBox1 = new MultipleProxySandbox("代理沙箱1", context);
31newSandBox1.active();
32const proxyWindow1 = newSandBox1.proxy;
33
34const newSandBox2 = new MultipleProxySandbox("代理沙箱2", context);
35newSandBox2.active();
36const proxyWindow2 = newSandBox2.proxy;
37console.log(
38  "共享对象是否相等",
39  window.document === proxyWindow1.document,
40  window.document === proxyWindow2.document
41);
42
43proxyWindow1.a = "1"; // 设置代理1的值
44proxyWindow2.a = "2"; // 设置代理2的值
45window.a = "3"; // 设置window的值
46console.log("打印输出的值", proxyWindow1.a, proxyWindow2.a, window.a);
47
48newSandBox1.inactive();
49newSandBox2.inactive(); // 两个沙箱都失活
50
51proxyWindow1.a = "4"; // 设置代理1的值
52proxyWindow2.a = "4"; // 设置代理2的值
53window.a = "4"; // 设置window的值
54console.log("失活后打印输出的值", proxyWindow1.a, proxyWindow2.a, window.a);
55
56newSandBox1.active();
57newSandBox2.active(); // 再次激活
58
59proxyWindow1.a = "4"; // 设置代理1的值
60proxyWindow2.a = "4"; // 设置代理2的值
61window.a = "4"; // 设置window的值
62console.log("失活后打印输出的值", proxyWindow1.a, proxyWindow2.a, window.a);