js沙箱

沙箱，英文是sandbox，敲程序的应该都听过，或许用过类似理念的只是自己不知道，简单说就是让你的程序运行在一个隔离的环境下，不对外界的其他程序造成影响。沙箱主要是一种安全机制，把一些不信任的代码运行在沙箱之内，不能访问沙箱之外的代码。比如在线编辑器、执行第三方js、vue服务端渲染等，只要是运行不信任的程序，沙箱隔离就会使用到。

常见的eval和new Function可以提供一个运行外部代码的环境，但是没有解决访问全局的问题，配合with用法可以稍微限制，先从当前的with提供的查找，但是查找不到还是能从上获取：

function sandbox(code) {

    code= 'with (sandbox) {' + code + '}'

    return new Function('sandbox', code)

}

let str = 'let a = 10;console.log(a)'

sandbox(str)({})

可以打印。

而es6的proxy则可以解决这个问题，proxy可以设置访问拦截器，于是with再加上proxy几乎完美解决js沙箱机制。当然，还是有机制可以绕过，有大神发现Symbol.unScopables可以不受with的影响，所以要另外处理Symbol.unScopables：

function sandbox(code) {

    code = 'with (sandbox) {' + code + '}';

    const fn = new Function('sandbox', code);

    return (sandbox) => {

        const proxy = new Proxy(sandbox, {

            has(target, key) {

                return true;

            },

            get(target, key, receiver) {

                if (key === Symbol.unscopables) {

                    return undefined;

                }

            }

        });

        return fn(proxy);

    }

}

let str = 'let a = 10;console.log(a)'

sandbox(str)({})

报错。

这是目前js沙箱能做到的最好的沙箱机制了，很多会再加上iframe去做更多的限制，因为H5提出了iframe的sandbox属性，限制了更多，也可以进行配置解决这些限制。当然，想要绕过方法还是有的。而nodejs沙箱就很简单了，直接用内部提供的VM Module就可以了。感兴趣可以自己去查一查。

其实沙箱问题很多，解决修复这些方法也很多，感觉就是一堆大佬在博弈。这边想提一嘴，微前端概念其实就是用js创造一个类似iframe的沙箱，解决隔离问题，分别运行各个项目。所以现在沙箱使用也不一定都是安全机制，也会因为功能需求使用。常见的有快照沙箱和proxy沙箱。