手把手教你写一个简易的微前端框架 about front-end-articles

[cengbin]

目前确实没有好的办法...

<script>
  let handler = {
    has(target, key) {
      if (key in target) {
        return target[key]
      } else {
        throw `无法访问属性或方法 ${key}, 详情请参考：https://www.google.com`
        // throw new Error(`无法访问属性或方法 ${key}, 详情请参考：https://www.google.com`)
        return undefined
      }
    }
  }

  let target = {
    console: window.console,
    Math: window.Math,
    Date: window.Date,

    name: "i am module"
  }

  let proxy = new Proxy(target, handler)

  let moduleCode = `

      console.log('this1:',this); // 非严格模式下，this指向proxy

      function foo(){
          console.log(name);

          // this === window 非严格模式下，此写法会造成沙箱逃逸
          console.log("this2:", this); // 非严格模式下，this是AO，ECMAScript规范规定AO作为this值返回时通常为null，this不能为null，重置为全局对象。
          // console.log(this.document);

          function bar(){
              var b = 10;
              console.log("b: ",b);
              console.log(Math.random());
              console.log(new Date());
              console.log(document.getElementById('p'));
              console.log(window);
          }

          bar();
      }

      foo()
  `

  let fun = new Function(`
        with(this){
            (function(){
              "use strict";
              ${moduleCode}
            })()
        }
    `)

  fun.call(proxy)
</script>

此问题已解决，在严格模式下执行用户模块代码即可。

[Zian502]

学习了 🐂

[NameWjp]

越看越觉得微前端的各种实现很 hack，项目复杂度一旦上来就会有各种问题。

[cengbin]

通过Proxy+Function+with这种形式建立的安全沙箱，如果code中的函数内通过this仍然可以访问到window，请问有什么好的办法解决这种写法造成的沙箱逃逸吗？

如下示例代码：

<script>
  let handler = {
    has(target, key) {
      if (key in target) {
        return target[key]
      } else {
        throw `无法访问属性或方法 ${key}, 详情请参考：https://www.google.com`
        return undefined
      }
    }
  }

  let target = {
    console: window.console,
    Math: window.Math,
    Date: window.Date,

    name: "i am module"
  }

  let proxy = new Proxy(target, handler)

  let moduleCode = `
      function foo(){
          console.log(name);

          // this===window 此写法会造成沙箱逃逸
          console.log("this:", this);
          console.log(this.document);

      }

      foo()
  `

  let fun = new Function("window", `
        "use stric";

        with(window){
            ${moduleCode}
        }
    `)

  fun.call(proxy, proxy)
</script>

[woai3c]

目前确实没有好的办法...