浅析 JavaScript 沙箱

些许
236 阅读11分钟

[TOC]

一、什么是沙箱

  • 概念

在计算机安全中，沙箱（Sandbox）是一种用于隔离正在运行程序的安全机制，通常用于执行未经测试或不受信任的程序或代码，它会为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行。

  • 举个简单的栗子

我们开发的页面程序运行在浏览器中，程序只能修改浏览器允许我们修改的那部分接口，我们无法通过这段脚本影响到浏览器之外的状态，在这个场景下浏览器本身就是一个沙箱。
浏览器中每个标签页运行一个独立的网页，每个标签页之间互不影响，这个标签页就是一个沙箱。

二、JS沙箱的应用场景

上述介绍了一些较为宏观的沙箱场景，其实在日常的开发中也存在很多的场景需要应用这样一个机制：

  • jsonp

    解析服务器所返回的jsonp请求时，如果不信任jsonp中的数据，可以通过创建沙箱的方式来解析获取数据；

  • 执行第三方js：

    当你有必要执行第三方js的时候，而这份js文件又不一定可信的时候；

  • 在线代码编辑器

    相信大家都有使用过一些在线代码编辑器，比如codesandbox，而这些代码的执行，基本都会放置在沙箱中，防止对页面本身造成影响；

  • vue模板中表达式计算：

    这一点官方文档有提到，vue模板中表达式的计算被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不能够在模板表达式中试图访问用户定义的全局变量。

  • web应用插件机制/自定义组件

    许多应用程序提供了插件（Plugin）机制（如Figma），或者支持自定义代码开发组件（比如58星火），开发者可以书写自己的插件程序实现某些自定义功能。开发过插件的同学应该知道开发插件时会有很多限制条件，这些应用程序在运行插件时需要遵循宿主程序制定的运行规则，插件的运行环境和规则就是一个沙箱。

  • 微前端架构的基石

    在微前端架构设计下，最关键的一个设计便是各个子应用间的调度实现以及其运行态的维护。当前的很多微前端架构（如 乾坤、Alfa）都使用JS 沙箱技术 进行子应用间的运行时隔离

总而言之，只要遇到不可信的第三方代码，我们就可以使用沙箱将代码进行隔离，从而保障外部程序的稳定运行。如果不做任何处理地执行不可信代码，在前端中最直观的副作用/危害就是 污染、篡改全局 window 状态，影响主页面功能甚至被 XSS 攻击。

三、如何实现一个 JS 沙箱

要实现一个沙箱，其实就是去制定一套程序执行机制，在这套机制的作用下 沙箱内部程序的运行不会影响到外部程序的运行。

1. 最简陋的沙箱

要实现这样一个效果，最直接的想法就是程序中访问的所有变量均来自可靠或自主实现的上下文环境 而不会从全局的执行环境中取值，那么要实现变量的访问均来自一个可靠上下文环境，我们需要为待执行程序构造一个作用域：

// 执行上下文对象
const ctx = 
    func: variable => {
        console.log(variable)
    },
    foo: 'foo'
}

// 最简陋的沙箱
function poorestSandbox(code, ctx) {
    eval(code) // 为执行程序构造了一个函数作用域
}

// 待执行程序
const code = `
    ctx.foo = 'bar'
    ctx.func(ctx.foo)
`

poorestSandbox(code, ctx) // bar

这样的一个沙箱要求源程序在获取任意变量时都要加上执行上下文对象的前缀，这显然是非常不合理的，因为我们没有办法控制第三方的行为，是否有办法去掉这个前缀呢？

2. 非常简陋的沙箱（with）

使用 with 声明可以帮我们去掉这个前缀，with 会在作用域链的顶端添加一个新的作用域，该作用域的变量对象会加入 with 传入的对象，因此相较于外部环境其内部的代码在查找变量时会优先在该对象上进行查找。

// 执行上下文对象
const ctx = {
    func: variable => {
        console.log(variable)
    },
    foo: 'foo'
}

// 非常简陋的沙箱
function veryPoorSandbox(code, ctx) {
    with(ctx) { // Add with
        eval(code)
    }
}

// 待执行程序
const code = `
    foo = 'bar'
    func(foo)
`

veryPoorSandbox(code, ctx) // bar

这样一来就实现了执行程序中的变量在沙箱提供的上下文环境中查找先于外部执行环境的效果。
问题来了，在提供的上下文对象中没有找到某个变量时，代码仍会沿着作用域链一层一层向上查找，这样的一个沙箱仍然无法控制内部代码的执行。我们希望沙箱中的代码只在手动提供的上下文对象中查找变量，如果上下文对象中不存在该变量则直接报错或返回 undefined。

3. 没那么简陋的沙箱（With + Proxy）

为了解决上述抛出的问题，我们借助 ES2015 的一个新特性—— Proxy，Proxy 可以代理一个对象，从而拦截并定义对象的基本操作。
使用 Proxy.has() 来拦截 with 代码块中的任意变量的访问，并设置一个白名单，在白名单内的变量可以正常走作用域链的访问方式，不在白名单内的变量会继续判断是否存在沙箱自行维护的上下文对象中，存在则正常访问，不存在则直接报错。

// 构造一个 with 来包裹需要执行的代码，返回 with 代码块的一个函数实例
function withedYourCode(code) {
  code = 'with(globalObj) {' + code + '}'
  return new Function('globalObj', code)
}


// 可访问全局作用域的白名单列表
const access_white_list = ['Math', 'Date']


// 待执行程序
const code = `
    Math.random()
    location.href = 'xxx'
    func(foo)
`

// 执行上下文对象
const ctx = {
    func: variable => {
        console.log(variable)
    },
    foo: 'foo'
}

// 执行上下文对象的代理对象
const ctxProxy = new Proxy(ctx, {
    has: (target, prop) => { // has 可以拦截 with 代码块中任意属性的访问
      if (access_white_list.includes(prop)) { // 在可访问的白名单内，可继续向上查找
          return target.hasOwnProperty(prop)
      }

      if (!target.hasOwnProperty(prop)) {
          throw new Error(`Invalid expression - ${prop}! You can not do that!`)
      }

      return true
    }
})

// 没那么简陋的沙箱

function littlePoorSandbox(code, ctx) {

    withedYourCode(code).call(ctx, ctx) // 将 this 指向手动构造的全局代理对象

}


littlePoorSandbox(code, ctxProxy) 

// Uncaught Error: Invalid expression - location! You can not do that!

到这一步，其实很多较为简单的场景就可以覆盖了（eg: Vue 的模板字符串），那如果想要实现 CodeSanbox 这样的 web 编辑器呢？在这样的编辑器中我们可以任意使用诸如 document、location 等全局变量且不会影响主页面。
从而又衍生出另一个问题——如何让子程序使用所有全局对象的同时不影响外部的全局状态呢？

4. 天然的优质沙箱（iframe）

听到上面这个问题 iframe 直呼内行，iframe 标签可以创造一个独立的浏览器原生级别的运行环境，这个环境由浏览器实现了与主环境的隔离。在 iframe 中运行的脚本程序访问到的全局对象均是当前 iframe 执行上下文提供的，不会影响其父页面的主体功能，因此使用 iframe 来实现一个沙箱是目前最方便、简单、安全的方法。

试想一个这样的场景：一个页面中有多个沙箱窗口，其中有一个沙箱需要与主页面共享几个全局状态（eg: 点击浏览器回退按钮时子应用也会跟随着回到上一级），另一个沙箱需要与主页面共享另外一些全局状态（eg: 共享 cookie 登录态）。

虽然浏览器为主页面和 iframe 之间提供了 postMessage 等方式进行通信，但单单使用 iframe 来实现这个场景是比较困难且不易维护的。

5. 应该能用的沙箱（With + Proxy + iframe）

为了实现上述场景，我们把上述方法缝合一下即可：

  • 利用 iframe 对全局对象的天然隔离性，将 iframe.contentWindow 取出作为当前沙箱执行的全局对象
  • 将上述沙箱全局对象作为 with 的参数限制内部执行程序的访问，同时使用 Proxy 监听程序内部的访问。
  • 维护一个共享状态列表，列出需要与外部共享的全局状态，在 Proxy 内部实现访问控制。
// 沙箱全局代理对象类
class SandboxGlobalProxy {

    constructor(sharedState) {
        // 创建一个 iframe 对象，取出其中的原生浏览器全局对象作为沙箱的全局对象
        const iframe = document.createElement('iframe', {url: 'about:blank'})
        document.body.appendChild(iframe)
        const sandboxGlobal = iframe.contentWindow // 沙箱运行时的全局对象
     

        return new Proxy(sandboxGlobal, {
            has: (target, prop) => { // has 可以拦截 with 代码块中任意属性的访问
                if (sharedState.includes(prop)) { // 如果属性存在于共享的全局状态中，则让其沿着原型链在外层查找
                    return false
                }

                if (!target.hasOwnProperty(prop)) {
                    throw new Error(`Invalid expression - ${prop}! You can not do that!`)
                }
                return true
            }
        })

    }

}



function maybeAvailableSandbox(code, ctx) {

    withedYourCode(code).call(ctx, ctx)

}

const code_1 = `

    console.log(history == window.history) // false

    window.abc = 'sandbox'

    Object.prototype.toString = () => {

        console.log('Traped!')

    }

    console.log(window.abc) // sandbox

`

const sharedGlobal_1 = ['history'] // 希望与外部执行环境共享的全局对象

const globalProxy_1 = new SandboxGlobalProxy(sharedGlobal_1)

maybeAvailableSandbox(code_1, globalProxy_1)



window.abc // undefined 

Object.prototype.toString() // [object Object] 并没有打印 Traped

从实例代码的结果可以看到借用 iframe 天然的环境隔离优势和 with + Proxy 强大的控制力，我们实现了沙箱内全局对象和外层的全局对象的隔离，并实现了共享部分全局属性。

四、JS沙箱在微前端的应用

在微前端架构设计下，最关键的一个设计便是各个子应用间的调度实现以及其运行态的维护，而运行时各子应用使用全局事件监听、使全局 CSS 样式生效等常见的需求在多个子应用切换时便会成为一种污染性的副作用，为了解决这些副作用，很多微前端架构基于JS沙箱机制有着各种各样的实现。

乾坤

qiankun框架为了实现js隔离，提供了三种不同场景使用的沙箱，分别是 snapshotSandbox、proxySandbox、legacySandbox。

snapshotSandbox(快照沙箱)

从名字上我们可以理解快照就是给你着一张相片，来记录你此刻的状态。qiankun 的快照沙箱是基于diff来实现的，主要用于不支持window.Proxy的低版本浏览器，而且也只适应单个的子应用。

  • 原理

    激活沙箱时，将window的快照信息存到windowSnapshot中， 如果modifyPropsMap有值，还需要还原上次的状态；激活期间，可能修改了window的数据；退出沙箱时，将修改过的信息存到modifyPropsMap里面，并且把window还原成初始进入的状态

  • 优劣
    可以很明显的看到，snapshotSandbox会污染全局window，但是可以支持不兼容Proxy的浏览器。
  • 精简代码
const iter = (window, callback) => {
  for (const prop in window) {
    if(window.hasOwnProperty(prop)) {
      callback(prop);
    }
  }
}
class SnapshotSandbox {
  constructor() {
    this.proxy = window;
    this.modifyPropsMap = {};
  }
  // 激活沙箱
  active() {
    // 缓存active状态的window
    this.windowSnapshot = {};
    iter(window, (prop) => {
      this.windowSnapshot[prop] = window[prop];
    });
    Object.keys(this.modifyPropsMap).forEach(p => {
      window[p] = this.modifyPropsMap[p];
    })
  }
  // 退出沙箱
  inactive(){
    iter(window, (prop) => {
      if(this.windowSnapshot[prop] !== window[prop]) {
        // 记录变更
        this.modifyPropsMap[prop] = window[prop];
        // 还原window
        window[prop] = this.windowSnapshot[prop];
      }
    })
  }
}


// test
const sandbox = new SnapshotSandbox();
((window) => {
   // 激活沙箱
   sandbox.active();
   window.sex= '男';
   window.age = '22';
   console.log(window.sex, window.age); // 男 22

   // 退出沙箱
   sandbox.inactive();
   console.log(window.sex, window.age); //  undefined undefined
   
   // 激活沙箱
   sandbox.active();
   console.log(window.sex, window.age); // 男 22
   
})(sandbox.proxy);
legacySandbox(单例沙箱)

  • 原理

    基于Proxy实现 只支持单例
    legacySandbox设置了三个参数来记录全局变量,分别是记录沙箱新增的全局变量addedPropsMapInSandbox、记录沙箱更新的全局变量modifiedPropsOriginalValueMapInSandbox、持续记录更新的(新增和修改的)全局变量，用于在任意时刻做snapshot的currentUpdatedPropsValueMap。

  • 优劣
    同样会对window造成污染，但是性能比快照沙箱好，不用遍历window对象。
  • 精简代码
class Legacy {
  constructor() {
    // 沙箱期间新增的全局变量
    this.addedPropsMapInSandbox = {};
    // 沙箱期间更新的全局变量
    this.modifiedPropsOriginalValueMapInSandbox = {};
    // 持续记录更新的(新增和修改的)全局变量的 map，用于在任意时刻做 snapshot
    this.currentUpdatedPropsValueMap = {};
    const rawWindow = window;
    const fakeWindow = Object.create(null);
    this.sandboxRunning = true;
    const proxy = new Proxy(fakeWindow, {
      set: (target, prop, value) => {
        // 如果是激活状态
        if(this.sandboxRunning) {
          // 判断当前window上存不存在该属性
          if(!rawWindow.hasOwnProperty(prop)) {
            // 记录新增值
            this.addedPropsMapInSandbox[prop] = value;
          } else if(!this.modifiedPropsOriginalValueMapInSandbox[prop]) {
            // 记录更新值的初始值
            const originValue = rawWindow[prop]
            this.modifiedPropsOriginalValueMapInSandbox[prop] = originValue;
          }
          // 纪录此次修改的属性
          this.currentUpdatedPropsValueMap[prop] = value;
          // 将设置的属性和值赋给了当前window，还是污染了全局window变量
          rawWindow[prop] = value;
          return true;
        }
        return true;
      },
      get: (target, prop) => {
        return rawWindow[prop];
      }
    })
    this.proxy = proxy;
  }
  active() {
    if (!this.sandboxRunning) {
      // 还原上次修改的值
      for(const key in this.currentUpdatedPropsValueMap) {
        window[key] = this.currentUpdatedPropsValueMap[key];
      }
    }

    this.sandboxRunning = true;
  }
  inactive() {
    // 将更新值的初始值还原给window
    for(const key in this.modifiedPropsOriginalValueMapInSandbox) {
      window[key] = this.modifiedPropsOriginalValueMapInSandbox[key];
    }
    // 将新增的值删掉
    for(const key in this.addedPropsMapInSandbox) {
      delete window[key];
    }

    this.sandboxRunning = false;
  }
}

// test
  window.sex= '男';
  let LegacySandbox = new Legacy();
  ((window) => {
   // 激活沙箱
   LegacySandbox.active();
   window.age = '22';
   window.sex= '女';
   console.log('激活', window.sex, window.age, LegacySandbox); // 激活 女 22
   
   // 失活沙箱
   LegacySandbox.inactive();
   console.log('退出', window.sex, window.age, LegacySandbox); // 退出 男 undefined 
   
   // 激活沙箱
   LegacySandbox.active();
   console.log('再次激活', window.sex, window.age, LegacySandbox); // 再次激活 女 22 
   
  })(LegacySandbox.proxy);
  
  console.log('退出沙箱proxy1', window.sex); // 退出沙箱proxy1 女
proxySandbox(多例沙箱)

  • 原理

    激活沙箱后，每次对window取值的时候，先从自己沙箱环境的fakeWindow里面找，如果不存在，就从rawWindow(外部的window)里去找；当对沙箱内部的window对象赋值的时候，会直接操作fakeWindow，而不会影响到rawWindow。

  • 优劣
    不会污染全局window，支持多个子应用同时加载。
  • 精简代码
  class ProxySandbox {
    active() {
      this.sandboxRunning = true;
    }
    inactive() {
      this.sandboxRunning = false;
    }
    constructor() {
      const rawWindow = window;
      const fakeWindow = {};
      const proxy = new Proxy(fakeWindow, {
        set: (target, prop, value) => {
          if(this.sandboxRunning) {
            target[prop] = value;
            return true;
          }
        },
        get: (target, prop) => {
          // 如果fakeWindow里面有，就从fakeWindow里面取，否则，就从外部的window里面取
          let value = prop in target ? target[prop] : rawWindow[prop];
          return value
        }
      })
      this.proxy = proxy;
    }
  }


// test
  window.sex = '男';
  let proxy1 = new ProxySandbox();
  let proxy2 = new ProxySandbox();
  ((window) => {
    proxy1.active();
    console.log('修改前proxy1的sex', window.sex); // 修改前proxy1的sex 男
    
    window.sex = '女';
    console.log('修改后proxy1的sex', window.sex); // 修改后proxy1的sex 女
    
  })(proxy1.proxy);
  console.log('外部window.sex=>1', window.sex); // 外部window.sex=>1 男

  ((window) => {
    proxy2.active();
    console.log('修改前proxy2的sex', window.sex); // 修改前proxy2的sex 男
    
    window.sex = '111';
    console.log('修改后proxy2的sex', window.sex); // 修改后proxy2的sex 111

  })(proxy2.proxy);
  console.log('外部window.sex=>2', window.sex); // 外部window.sex=>2 男

Browser VM(Alfa)

思路

通过new iframe 对象，把里面的原生浏览器对象通过 contentWindow 取出来，因为这些对象天然隔离，就省去了自己实现的成本。

const iframe = document.createElement( 'iframe' );

取出对应的 iframe 中原生的对象之后，就会对特定需要隔离的对象生成对应的 Proxy, 然后对一些属性获取和属性设置，做一些特定的设置，比如 window.document 需要返回特定的沙箱 document 而不是当前浏览器的 document。

class Window {
    constructor(options, context, frame) {
    return new Proxy(frame.contentWindow, {
        set(target, name, value) {
        target[name] = value;
        return true;
      },
      
      get(target, name) {
        switch( name ) {
          case 'document':
            return context.document;
          default:
        }
        
        if( typeof target[ name ] === 'function' && /^[a-z]/.test( name ) ){
          return target[ name ].bind && target[ name ].bind( target );
        }else{
          return target[ name ];
        }
      }
    });
  }
}

为了文档能够被加载在同一个 DOM 树上，对于 document，大部分的 DOM 操作的属性和方法还是直接用的宿主浏览器中的 document 的属性和方法。

由于子应用有自己的沙箱环境，之前所有独占式的资源现在都变成了应用独享（尤其是 location、history），所以子应用也能同时被加载。并且对于一些变量，还能在 proxy 中设置一些访问权限的事情，从而限制子应用的能力，比如 Cookie， LocalStoage 读写。

当这个 iframe 被移除时，写在 window 的变量和设置的一些 timeout 时间也会一并被移除。DOM 事件需要沙箱记录，然后在宿主中移除。

五、总结

本文主要介绍了沙箱的基本概念、应用场景以及如何去实现一个 JavaScript 沙箱。沙箱的实现方式并不是一成不变的，应当结合具体的场景分析其需要达成的目标。除此之外，沙箱逃逸的防范同样是一件任重而道远的事，因为很难在构建的初期就覆盖所有的执行 case。没有一个沙箱的组装是一蹴而就的。

avatar
文章
阅读
粉丝