JS沙盒实现

JS沙盒简述

沙盒（英语：sandbox，又译为沙箱），计算机术语，在计算机安全领域中是一种安全机制，为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。
沙盒通常严格控制其中的程序所能访问的资源，比如，沙盒可以提供用后即回收的磁盘及内存空间。在沙盒中，网络访问、对真实系统的访问、对输入设备的读取通常被禁止或是严格限制。从这个角度来说，沙盒属于虚拟化的一种。
沙盒中的所有改动对操作系统不会造成任何损失。通常，这种技术被计算机技术人员广泛用于测试可能带毒的程序或是其他的恶意代码。

JS沙盒就是，提供一个与外界隔绝的执行环境来JS代码，在微前端中常用来帮助独立上线互不干扰的代码，解耦，减少维护成本。

知识点回顾

1. with在内部使用in运算符来计算变量，如果条件是 true，它将从沙盒中检索变量。需要考虑 Symbol.unscopables指定的对象值。

2. new Function 执行 code 作用等同于 eval，但 eval 能访问到当前局部作用域变量，new Function 返回函数不管哪里执行，都只能访问全局作用域。

3. contentWindow 属性返回当前HTMLIFrameElement的Window对象，沙盒特设属性。

4. Proxy的this问题
   在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。这样就会导致取值或调用某些方法时，会取错this，无法得出正确的结果。可以通过判断 value = Reflect.get( target, prop, receiver)是否为函数， value.bind(target)来解决。

简单实现

const sanboxDiv = document.createElement('div');
sanboxDiv.style.width = '300px';
sanboxDiv.style.height = '300px';
document.body.appendChild(sanboxDiv)