JS沙箱通过代码隔离保护宿主环境，主要实现方式包括：1. 函数作用域与with语句限制变量访问，适用于简单场景但性能较差；2. Proxy代理全局对象，拦截读写操作以防止污染，支持权限控制；3. iframe提供完全隔离的执行环境，结合sandbox属性和postMessage实现安全运行与通信；4. AST转换在执行前分析代码，检测并移除eval等危险操作。实际应用中常组合多种技术，如iframe隔离配合Proxy与AST校验，依据安全需求选择合适策略。
JS沙箱环境的核心目标是实现代码隔离，确保运行在其中的不受信代码无法干扰宿主环境或其他模块。这种机制常用于插件系统、在线代码编辑器（如CodePen）、低代码平台或微前端架构中。要实现可靠的JS沙箱，需从多个层面控制变量访问、作用域和全局对象的修改。
1. 通过函数作用域与with实现基础隔离
利用JavaScript的词法作用域和with语句可以构造一个简易沙箱。通过将代码包裹在函数中，并使用with绑定一个受限的作用域对象，限制其对全局变量的直接访问。
示例：
function createSandbox(code, context) { const keys = Object.keys(context); const values = Object.values(context); // 构造一个接受上下文参数的函数 const fn = new Function(...keys, ` with(this) { ${code} } `); return fn.bind(context)(...values); } // 使用 const ctx = { a: 1, b: 2, console: console }; createSandbox('console.log(a + b)', ctx); // 输出 3说明：此方法依赖with动态查找变量，但存在性能问题且eval类行为可能被CSP策略阻止。适用于简单场景，不推荐生产环境直接使用。
2. 代理全局对象实现精细控制
使用Proxy拦截对全局对象（如window）的读写操作，可实现更安全的隔离。通过代理，可以防止恶意代码篡改关键属性或访问敏感API。
示例：
const rawWindow = window; const sandboxGlobal = {}; const proxy = new Proxy(sandboxGlobal, { get(target, prop) { // 拦截读取，优先返回沙箱内变量，否则从window读取（只读） if (prop in target) return target[prop]; return rawWindow[prop] === undefined ? undefined : undefined; // 可配置是否允许访问 }, set(target, prop, value) { // 所有赋值都发生在沙箱内部，不影响真实window target[prop] = value; return true; } }); // 运行代码时绑定该代理为全局this function runInSandbox(code, globalProxy) { return function() { with(globalProxy) { eval(code); } }.call(globalProxy); }优势：能有效阻止全局污染，支持动态监控和权限控制。比如可禁止访问localStorage或document.cookie。
3. 利用iframe实现完全隔离
最彻底的隔离方式是使用iframe。每个iframe拥有独立的执行上下文和全局对象，天然实现跨域隔离。
实现思路：
- 创建隐藏的
iframe，设置sandbox属性控制权限（如禁用脚本、表单提交等） - 通过
postMessage进行安全通信 - 将待执行代码注入iframe的
<script></script>标签中运行
示例：
const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.sandbox = 'allow-scripts'; // 不允许DOM访问、网络请求等 document.body.appendChild(iframe); // 注入代码 iframe.contentWindow.eval(`console.log("运行在隔离环境")`); // 通信示例 window.addEventListener('message', e => { console.log('来自沙箱的消息:', e.data); });适用场景：需要高安全级别的应用，如运行第三方widget或用户提交的脚本。
4. 结合AST转换提升安全性
在执行前对代码进行静态分析，通过抽象语法树（AST）检测并移除危险操作，如eval、Function构造器、原型链篡改等。
工具建议：
- 使用
acorn或babel-parser解析代码为AST - 遍历节点，识别非法调用或全局访问
- 重写或拒绝执行包含风险的代码段
例如：拦截所有CallExpression节点，检查是否调用eval或setTimeout传入字符串。
基本上就这些。实际项目中往往组合多种方案：用iframe做进程级隔离，内部再配合Proxy和AST校验增强控制。关键是根据业务风险等级选择合适粒度的防护策略。
