不再依赖 iframe 或 eval：JavaScript 新一代隔离沙箱 ShadowRealm
在现代前端开发中，我们经常需要处理来自不同来源的代码——第三方广告、分析脚本、用户自定义插件，或者动态加载的模块。如何在保证安全的前提下执行这些不受信任的代码，一直是前端开发者的痛点。
过去的解决方案各有局限：
- iframe：安全隔离性强，但通信复杂，开销大
- Web Workers：异步执行，不适合需要同步计算的场景
- eval：完全不隔离，存在安全隐患
ShadowRealm：轻量级 JavaScript 沙箱
ShadowRealm 是 ECMAScript 正在制定的新标准（TC39 Stage 3），它允许创建一个 完全隔离的 JavaScript 全局环境。
你可以把它想象成一个：
- 轻量级 iframe：无需 DOM、无需渲染开销
- 同步可控：可以在主环境与沙箱之间安全交互
- 全隔离：拥有独立的 globalThis 和内建对象（Object、Array、Promise 等）
在 ShadowRealm 内执行的代码 无法访问主页面的 window 或 document，从而保证安全性。
核心概念与 API
1. 创建 ShadowRealm 实例
const realm = new ShadowRealm();
每个 realm 都是一个独立的 JavaScript 全局环境。
2. 执行代码：evaluate()
const result = realm.evaluate(`
function greet(name) {
return 'Hello from the Realm, ' + name + '!';
}
42 + 8; // evaluate 返回表达式的结果
`);
console.log(result); // 输出: 50
✅ 特点：
evaluate()内的代码与主环境 完全隔离- 无法访问主环境变量或 DOM
- 可返回计算结果
3. 导入 Realm 内的函数：importValue()
// 在 Realm 内定义一个函数
realm.evaluate(`
function greet(name) {
return 'Hello from the Realm, ' + name + '!';
}
`);
// 从 Realm 导入函数到主环境
const wrappedGreet = await realm.importValue('greet');
// 调用函数
console.log(wrappedGreet('World')); // 输出: "Hello from the Realm, World!"
✅ 优势：
- 可以安全地调用沙箱内的函数
- 保持同步逻辑和隔离安全
- 避免 eval 或全局污染
ShadowRealm 的应用场景
- 安全执行第三方脚本：广告、分析、插件
- 动态模块加载：在隔离环境执行代码，防止影响主应用
- 同步计算任务：不需要异步 Web Worker，但仍保持安全隔离
总结
- ShadowRealm 提供了全新的 JavaScript 隔离机制
- 完全隔离主环境，全局对象独立
- 支持同步调用、evaluate、importValue
- Stage 3 规范已稳定，未来浏览器可广泛实现
它标志着 JavaScript 安全执行环境的一次重要升级，让前端开发者无需依赖 iframe、Web Worker 或危险的 eval，也能实现安全、可控的代码沙箱。