微盟前端基于JavaScript沙箱落地实践
一、前言
二、使用场景
2.1 iPaaS 可视化 API 编排
2.2 微前端应用沙箱
三、JS沙箱调研
3.1 eval和Function
// 使用 eval 的糟糕代码：function looseJsonParse(obj){return eval(`(${obj})`);}console.log(looseJsonParse("{a:(4-1), b:function(){}, c:new Date()}"))// 使用 Function 的更好的代码：function looseJsonParse(obj){return Function(`"use strict";return (${obj})`)();}console.log(looseJsonParse("{a:(4-1), b:function(){}, c:new Date()}"))
3.2 with + new Function + proxy实现
3.2.1 with关键字
3.2.2 ES6 Proxy
const handler = {get: function (obj, prop) {return prop in obj ? obj[prop] : 'weimob';},};const p = new Proxy({}, handler);p.a = 2023;p.b = undefined;console.log(p.a, p.b); // 2023 undefinedconsole.log('c' in p, p.c); // false, weimob
3.2.3 Symbol.unScopables
3.2.4 沙箱实现
function sandbox(code, context) {context = context || Object.create(null);const fn = new Function('context', `with(context){return (${code})}`);const proxy = new Proxy(context, {has(target, key) {if (["console", "setTimeout", "Date"].includes(key)) {return true}if (!target.hasOwnProperty(key)) {throw new Error(`Illegal operation for key ${key}`)}return target[key]},get(target, key, receiver) {if (key === Symbol.unscopables) {return undefined;}return Reflect.get(target, key, receiver);}})return fn.call(proxy, proxy);}sandbox('3+2') // 5sandbox('console.log("微盟-智慧商业服务商")') // Cannot read property 'log' of undefinedsandbox('console.log("微盟-智慧商业服务商")', {console: window.console}) // 微盟-智慧商业服务商
使用 with API，将对象添加到作用域链的顶部，变量访问会优先查找你传入的参数对象，之后再往上找； 通过ES6提供的proxy，设置has函数，实现对象的访问拦截，同时处理Symbol.unscopables 的属性，控制可以被访问的变量 context，阻断沙箱内的对外访问； 绑定 this 指向 proxy 对象，防止 this 访问 window；
3.3 基于iframe实现
const parent = window;const frame = document.createElement('iframe');// 限制代码 iframe 代码执行能力frame.sandbox = 'allow-same-origin';document.body.appendChild(iframe);const sandboxGlobal = iframe.contentWindow;
3.4 node运行时实现
3.4.1 原生模块vm
const vm = require('node:vm');const x = 1;const context = { x: 2 };vm.createContext(context); // Contextify the object.const code = 'x += 40; var y = 17;';vm.runInContext(code, context);console.log(context.x); // 42console.log(context.y); // 17console.log(x); // 1; y is not defined.
node:vm 模块不是安全机制。不要用它来运行不受信任的代码。
3.4.2 不安全原因
const vm = require('vm');vm.runInNewContext('this.constructor.constructor("return process")().exit()');console.log('微盟-智慧商业服务商') // 永远不会执行
3.4.3 解决方案
const vm = require('vm');let sandBox = Object.create(null);sandBox.title = '微盟-智慧商业服务商'sandBox.console = consolevm.runInNewContext('console.log(title)', sandBox);
四、落地实践
4.1 微盟微前端框架Kraken
4.1.1 JS 隔离
创建沙箱实例，声明全局的 API，主要有addEventListener，setTimeout，createElement等；同时拦截对沙箱实例属性的访问，提供沙箱的生命钩子；
通过with，限制 JS 执行上下文内的作用域；
动态解析JS，使用 Function，解析字符串，通过 ES6 提供的 proxy，设置 has 函数，实现对象的访问拦截，同时套 SandBox 实例沙箱；
4.1.2 CSS 隔离
4.1.3 数据共享与通信
4.2 微盟中心化审批服务
4.2.1 node审批工单服务
4.2.2 动态扩展脚本
既然是扩展工单详情，审批服务在指定的声明周期（工单创建前）设计了钩子函数，业务方登记时，可一并登记扩展脚本，通过钩子函数执行，实现丰富工单详情的目的；当然了，为了安全，我们同样使用JS沙箱环境执行业务登记的脚本。
这里的沙箱环境是在node运行时创建，基于我们的调研，直接使用node提供的原生vm模块；核心代码如下：
/*** 执行用户传入的字符串脚本* @param {String} code js脚本字符串* @param {Object} context code中可读取的上下文* vm.runInNewContext(code[, contextObject[, options]])*/async function execScript(code, context) {try {const contextObject = Object.assign(context, {setTimeout,request})return vm.runInNewContext(code, contextObject)} catch (error) {return Promise.reject(error)}}
用户自定义的扩展脚本如下：
(() => ({ objectAction: `发布online：${packageName}@${packageVersion}` }))()
看起来很简单，使用 vm.runInNewContext 创建隔离环境，并传入指定的 context 上下文，包括请求体等， 在此上下文中执行用户的扩展脚本，最后返回执行结果，实现动态扩展。
4.2.3 总结
读到这里的同学可能会问”调研时不是说过，node:vm 模块不是安全机制。不要用它来运行不受信任的代码“，是的，有两个原因让我们依然选择使用vm模块；
1、我们的node审批服务只服务内部用户，在内网运行，风险可控；
2、用户登记变更对象和扩展脚本后，我们加入了审核机制，人工审核后放行；
总体来说，在node端实现沙箱环境较为简单，但是既要灵活可控，又要保障系统安全，做一定的约束必不可少！
五、总结展望
本文主要介绍了沙箱的基本概念、应用场景以及大前端领域如何实现 Javascript 沙箱。通过在公司内部落地应用，可以发现沙箱的实现方式并不是一成不变的，应当结合具体的业务场景分析其需要达成的目标。
Kkraken微前端框架目前服务公司内部运营后台、微盟开发平台、WOS商家后台、微盟云平台等多个业务线，为数百个微前端应用提供基座运行环境，所以在框架设计时就充分考虑了各种安全问题，沙箱逃逸的防范是一件任重而道远的事，业务场景的多元化有助于我们覆盖更多地执行 case，逐渐打磨，日趋完美。
中心化审批服务是公司内部的工具类应用，服务于内网用户，设计实现时考虑更多的是快速实现，快速落地，覆盖基本的执行case就可以；目前对用户提交脚本有人工审核，安全有保障，对比业务方独立对接审批流，提效95%以上，极大降低了接入成本。为"保障公司系统安全平稳运行，减少生产事故发生"提供了强有力的技术支持。同时我们也在优化对接流程，提升业务方的接入体验，为前端团队创造更大的价值，为公司研发投入降本增效。
六、参考资料