JavaScript 沙箱机制详解

1、什么是沙箱？

沙箱（Sandbox）是指将一段代码置于一个与外部环境隔离的执行环境中运行，确保这段代码不会污染全局环境，同时也不会被外部环境影响。

换句话说，沙箱就像是在一个“封闭房间”里运行代码，让它无法接触到房间外的真实世界。

2、为什么需要沙箱？

常见的应用场景包括：

微前端架构： 每个子应用都运行在自己的隔离环境中，互不干扰。

插件系统： 加载第三方插件时，不让其污染宿主页面。

运行用户代码： 比如浏览器代码编辑器、在线运行框架。

eval / Function 动态执行代码时的安全控制。

3、实现方式概览

JavaScript 中实现沙箱的方式主要有以下几种：

先来了解一下eval、with 和 new Function

3.1 eval：最原始的动态执行工具

eval(code) 会将传入的字符串当作 JavaScript 代码在当前作用域下执行。

var a = 1;
eval("a = 2;");
console.log(a); // 输出：2

缺点

1. 会修改当前作用域变量
2. 不利于性能优化，破坏词法作用域
3. 容易造成安全漏洞（如 XSS 攻击）

安全问题示例

const userInput = "alert('你被黑了');";
eval(userInput); // 💥 恶意代码执行

3.2 new Function：现代沙箱的首选

new Function(arg1, arg2, …, body) 会返回一个新的函数，函数体由字符串动态生成。

const sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // 输出：3

沙箱作用

const userCode = "console.log(a);";
const fn = new Function('a', userCode);
fn(123); // 输出：123

3.3 with：修改作用域链的利器

with (obj) { … } 语句会将 obj 添加到作用域链顶部，使得代码块中的变量优先从该对象中查找。

const ctx = {
   
    msg: 'hello' };
with (ctx) {
   
   
  console.log(msg); // 输出：hello
}

沙箱用途：结合 with + proxy，我们可以拦截代码访问的所有变量。

const sandbox = new Proxy({