发布于 由admin

JavaScript 阴影域名（Shadow Realms）：实现完全干净的 JS 执行环境与安全代码注入

各位同仁，各位技术爱好者，大家好！

在现代Web应用的开发中，我们经常会遇到一个核心挑战：如何在同一个JavaScript运行时环境中，安全、隔离地执行来自不同源或不同目的的代码？无论是加载第三方插件、渲染用户提供的模板、构建复杂的微前端应用，还是在服务端进行组件渲染，我们都渴望一个能够提供“完全干净”的JS执行环境的机制。

长期以来，我们依赖于<iframe>、Web Workers，甚至一些不那么理想的eval或new Function结合沙箱代理方案来尝试解决这个问题。然而，这些方案各有其局限性，或过于笨重，或隔离不彻底，或通信复杂。今天，我将向大家介绍一个即将改变这一现状的JavaScript新特性——阴影域名（Shadow Realms）。它旨在提供一个原生的、轻量级的、强隔离的JavaScript执行环境，为我们实现安全代码注入和构建健壮的应用提供了前所未有的可能性。

1. 问题的根源：JS执行环境的“污染”与安全鸿沟

在深入Shadow Realms之前，我们首先要理解它所要解决的核心问题。JavaScript的单线程、共享全局环境模型在带来开发便利的同时，也带来了固有挑战：

  • 全局对象污染 (Global Object Pollution)：任何在全局作用域中声明的变量、函数，或者通过修改window（浏览器环境）或global（Node.js环境）对象进行的属性添加，都会影响到整个应用程序。当引入第三方库或插件时，这种污染风险尤为突出。
  • 原型链篡改 (Prototype Chain Tampering)：JavaScript的原型继承机制允许代码修改内置对象的原型（如Array.prototype、Object.prototype）。恶意或不规范的代码可能会通过修改原型链来影响所有相关对象的行为，甚至引入安全漏洞。
  • 上下文共享 (Context Sharing)：不同模块或组件的代码在默认情况下共享同一个执行上下文，这意味着它们可以访问彼此的内部状态，可能导致意外的副作用、命名冲突，甚至是数据泄露。
  • 安全风险 (Security Risks)：如果一个应用程序需要执行来自不受信任源的代码（例如用户脚本、插件），而没有严格的隔离机制，那么这些代码可能会访问敏感数据、执行恶意操作，对整个应用造成严重破坏。

1.1 现有解决方案的局限性

我们并非没有尝试解决这些问题，但现有方案各有不足：

  • <iframe>：
    • 优点：提供了最强的隔离，包括JS、DOM、CSS、网络等。每个<iframe>都是一个独立的浏览器上下文。
    • 缺点：非常笨重，创建和销毁开销大；需要加载完整的文档和资源；跨域通信复杂（依赖postMessage）；无法直接访问父窗口的DOM。对于仅仅需要JS运行时隔离的场景来说，资源消耗过高。
  • Web Workers：
    • 优点：在独立的线程中运行JS，解决了JS的计算密集型任务阻塞主线程的问题；拥有独立的全局对象，避免了全局污染。
    • 缺点：无法直接访问DOM；通信只能通过异步的postMessage和结构化克隆算法；不支持直接的模块加载（需要Service Worker或Worklet的支持）。不适合需要与主线程同步交互或直接操作DOM的场景。
  • eval() / new Function()：
    • 优点：轻量级，动态执行代码。
    • 缺点：几乎没有隔离！ 代码在当前作用域执行，可以访问和修改当前作用域的所有变量和全局对象，存在巨大的安全隐患和污染风险。通常不建议用于执行不可信代码。
  • 基于Proxy的沙箱 (Shims/Polyfills)：
    • 优点：可以在一定程度上模拟隔离，通过Proxy拦截对全局对象的访问。
    • 缺点：不完全隔离。无法阻止对原生对象原型链的修改；性能开销大；实现复杂且容易出错；无法防御所有攻击向量（如“Realm-hopping”攻击，即通过获取原始全局对象绕过代理）。

我们真正需要的是一个能够在同一个事件循环/线程中，提供轻量级、原生、强隔离的JavaScript执行环境，并且能够以受控的方式进行通信。这正是Shadow Realms的用武之地。

2. 揭秘阴影域名（Shadow Realms）：核心概念

Shadow Realms，在TC39提案中，其目标是引入一种新的JavaScript运行时原语，允许我们创建新的全局对象和执行上下文。它不是一个新的线程（像Web Workers），也不是一个完整的浏览器文档环境（像<iframe>），而是一个干净的、独立的JavaScript全局环境，与当前（宿主）Realm完全隔离。

想象一下，你可以在你的应用程序内部，创建一个全新的、像刚打开浏览器标签页一样纯净的JavaScript环境。这个环境有自己的全局对象（globalThis），自己的内置构造函数（Object, Array, Function等），并且这些内置构造函数与宿主Realm中的完全不同。这意味着，在Shadow Realm中对Array.prototype的修改，不会影响到宿主Realm中的Array.prototype。这就是“强隔离”的核心所在。

2.1 关键特性与设计目标

  • 独立的全局对象：每个Shadow Realm都有自己的globalThis，包含自己的一套内置对象和函数。
  • 独立的内置对象原型链：Shadow Realm中的Object.prototype、Array.prototype等与宿主Realm中的是不同的对象实例。
  • 同一事件循环：Shadow Realms与宿主Realm共享同一个事件循环和JavaScript执行线程。这意味着它们之间的通信可以是同步的（通过特定机制），并且不会引入额外的线程管理复杂性。
  • 受控的跨Realm通信：Shadow Realms提供了一套明确的机制来在Realm之间传递值和调用函数，确保安全和可预测性。
  • 轻量级：相比<iframe>，Shadow Realms不涉及DOM、CSS、网络等开销，纯粹是JS运行时环境的隔离。
  • 原生支持：作为语言特性，它将由JavaScript引擎直接实现，性能和安全性远超用户空间实现的沙箱。

3. Shadow Realms的核心API与机制

Shadow Realms提案的核心在于引入了一个全局可用的Realm构造函数，以及在Realm实例上提供的方法。

3.1 创建一个Shadow Realm

通过new Realm()构造函数，我们可以创建一个新的Shadow Realm实例。

// 宿主 Realm
console.log('--- 宿主 Realm ---');
console.log('宿主 Realm 的全局对象：', globalThis);
console.log('宿主 Realm 的 Array 构造函数：', Array);
console.log('宿主 Realm 的 Object 构造函数：', Object);

// 创建一个 Shadow Realm 实例
const shadowRealm = new Realm();
console.log('n--- 创建 Shadow Realm ---');
console.log('Shadow Realm 实例：', shadowRealm);

// 此时，shadowRealm 已经是一个独立的 JS 环境了。
// 但我们还无法直接访问其内部的变量或执行代码。

此时，shadowRealm对象代表了一个全新的、空的JavaScript全局环境。这个环境与宿主Realm是完全隔离的。

3.2 在Shadow Realm中执行代码：realm.evaluate(codeString, ...args)

realm.evaluate()方法允许我们在指定的Shadow Realm中执行一段JavaScript代码字符串。这是将代码注入到隔离环境中的主要方式。

// 宿主 Realm
const shadowRealm = new Realm();

// 在 Shadow Realm 中执行代码
const result = shadowRealm.evaluate(`
    // 这段代码在 Shadow Realm 中执行
    const x = 10;
    const y = 20;

    // 检查内置对象在 Shadow Realm 中的身份
    console.log('--- Shadow Realm 内部 ---');
    console.log('Shadow Realm 的全局对象：', globalThis);
    console.log('Shadow Realm 的 Array 构造函数：', Array);
    console.log('Shadow Realm 的 Object 构造函数：', Object);
    console.log('宿主 Realm 的 Array === Shadow Realm 的 Array ?', arguments[0] === Array); // arguments[0] will be host Array

    // 定义一个函数，以便后续可以从宿主 Realm 调用
    globalThis.add = (a, b) => {
        console.log('add 函数在 Shadow Realm 中被调用');
        return a + b + x + y; // 访问 Shadow Realm 内部的 x 和 y
    };

    // 返回一个值，这个值会被传递回宿主 Realm
    'Hello from Shadow Realm: ' + (x + y); // 最后一个表达式的值作为 evaluate 的返回值
`);

console.log('n--- 宿主 Realm 接收返回值 ---');
console.log('realm.evaluate 的返回值：', result); // 输出: Hello from Shadow Realm: 30

// 验证隔离性
// 注意：宿主 Realm 中的 Array 和 Shadow Realm 中的 Array 是不同的对象
console.log('宿主 Realm 的 Array.name:', Array.name);
// console.log('Shadow Realm 的 Array.name:', shadowRealm.evaluate('Array.name')); // 这样获取是正确的

关键点：

  • codeString中的代码是在Shadow Realm的全局作用域中执行的。
  • realm.evaluate()的返回值是codeString中最后一个表达式的值。
  • arguments数组在Shadow Realm中可以用来接收从宿主Realm传递过来的参数。

3.3 跨Realm通信：值传递与Proxy机制

这是Shadow Realms最精妙也最核心的部分。由于Realm之间是完全隔离的，普通的对象或函数不能直接共享。Shadow Realms采用了一套规则来处理跨Realm的值传递：

3.3.1 原始值和结构化克隆对象（Pass by Value）

  • 原始值（Primitive values：string, number, boolean, null, undefined, symbol, bigint）会被直接复制。
  • 结构化克隆算法支持的对象（Structured-cloneable objects：如Date, RegExp, ArrayBuffer, TypedArrays, Map, Set, Error对象以及不包含函数或循环引用的纯数据对象）会进行深拷贝。
// 宿主 Realm
const shadowRealm = new Realm();

// 1. 传递原始值和结构化克隆对象
const hostNumber = 123;
const hostString = 'hello';
const hostArray = [1, 2, { a: 1 }];
const hostDate = new Date();

const realmResult = shadowRealm.evaluate(`
    // 这里的 arguments[0], arguments[1], ... 是从宿主 Realm 复制过来的值
    const [num, str, arr, date] = arguments;

    console.log('[Realm] 接收到的数字:', num, '类型:', typeof num);
    console.log('[Realm] 接收到的字符串:', str, '类型:', typeof str);
    console.log('[Realm] 接收到的数组:', arr, '类型:', typeof arr, '值:', JSON.stringify(arr));
    console.log('[Realm] 接收到的日期:', date, '类型:', typeof date, '值:', date.toISOString());

    // 尝试修改接收到的数组和日期
    arr.push(4);
    date.setFullYear(2000);

    return {
        modifiedArray: arr,
        modifiedDate: date,
        originalArrayInRealm: [10, 20] // 在 Realm 内部创建的数组
    };
`, hostNumber, hostString, hostArray, hostDate); // 传递参数

console.log('n--- 宿主 Realm 接收结构化克隆结果 ---');
console.log('宿主 Realm 中的原始数组 (未受影响):', hostArray); // [1, 2, { a: 1 }]
console.log('宿主 Realm 中的原始日期 (未受影响):', hostDate.toISOString()); // 原始日期

console.log('realm.evaluate 返回结果:', realmResult);
console.log('返回结果中的 modifiedArray (副本):', realmResult.modifiedArray); // [1, 2, { a: 1 }, 4]
console.log('返回结果中的 modifiedDate (副本):', realmResult.modifiedDate.toISOString()); // 2000-xx-xxT...
console.log('返回结果中的 originalArrayInRealm (新创建的副本):', realmResult.originalArrayInRealm); // [10, 20]

结论：对于原始值和结构化克隆对象，Shadow Realms实现了安全的“传值”语义，确保 Realm 之间的状态隔离。

3.3.2 非结构化克隆对象（函数、Promise、DOM节点等）：通过 Proxy 传递

对于不能通过结构化克隆算法处理的对象（例如函数、包含闭包的对象、Promise、DOM节点、Symbol实例、某些内置类的实例），Shadow Realms会返回一个特殊的Proxy对象。这个Proxy对象在宿主Realm中，但其所有操作（如函数调用、属性访问）都会被转发到原始对象所在的Shadow Realm中执行。

这种机制是Shadow Realms实现“安全代码注入”和“受控通信”的关键。

// 宿主 Realm
const shadowRealm = new Realm();

// 2. 传递函数和复杂对象（通过 Proxy）
// a) 从 Shadow Realm 导出函数到宿主 Realm
const realmFunctionProxy = shadowRealm.evaluate(`
    let counter = 0;
    // 定义一个在 Shadow Realm 内部维护状态的函数
    globalThis.incrementCounter = () => {
        counter++;
        console.log('[Realm] incrementCounter 被调用，当前 counter:', counter);
        return `Realm counter: ${counter}`;
    };

    // 返回这个函数的引用，宿主 Realm 会得到一个 Proxy
    globalThis.incrementCounter;
`);

console.log('n--- 宿主 Realm 调用 Realm 函数 (通过 Proxy) ---');
console.log('realmFunctionProxy 类型:', typeof realmFunctionProxy); // function
console.log('调用 Realm 函数结果 1:', realmFunctionProxy()); // 宿主 Realm 调用，实际在 Shadow Realm 执行
console.log('调用 Realm 函数结果 2:', realmFunctionProxy()); // 状态在 Shadow Realm 内部保持

// b) 从宿主 Realm 传递函数或复杂对象到 Shadow Realm
const hostCallback = (message) => {
    console.log(`[宿主] hostCallback 被调用，消息: ${message}`);
    return `宿主收到消息: ${message}`;
};

const hostObject = {
    name: 'Host Object',
    log: (msg) => console.log(`[宿主] HostObject.log: ${msg}`)
};

shadowRealm.evaluate(`
    // arguments[0] 是 hostCallback 的 Proxy
    // arguments[1] 是 hostObject 的 Proxy
    const [callbackProxy, objProxy] = arguments;

    console.log('n--- Shadow Realm 调用宿主函数 (通过 Proxy) ---');
    console.log('[Realm] callbackProxy 类型:', typeof callbackProxy); // function
    const callbackResult = callbackProxy('Hello from Realm!'); // Realm 调用宿主函数
    console.log('[Realm] 宿主函数返回结果:', callbackResult);

    console.log('[Realm] objProxy.name:', objProxy.name); // 访问宿主对象的属性
    objProxy.log('Calling from Realm via proxy.'); // 调用宿主对象的方法

    // 尝试修改 Proxy 对象，不会影响宿主原始对象
    objProxy.name = 'Modified in Realm'; // 这实际上是对 Proxy 对象的修改，宿主原始对象不受影响
    console.log('[Realm] 尝试修改 objProxy.name');

    // 返回一个 Promise，宿主 Realm 会得到一个 Promise Proxy
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('[Realm] Promise resolved!');
            resolve('Async result from Realm');
        }, 50);
    });

`, hostCallback, hostObject)
.then(promiseProxyResult => {
    console.log('n--- 宿主 Realm 接收 Realm Promise (通过 Proxy) ---');
    console.log('Realm Promise resolved with:', promiseProxyResult); // 宿主 Realm 等待 Promise Proxy 解决
});

console.log('n--- 宿主 Realm 验证 Host Object 状态 ---');
console.log('Host Object name (未受 Realm 影响):', hostObject.name); // 'Host Object'

Proxy机制的核心思想：

  • 当一个不可结构化克隆的对象从一个Realm传递到另一个Realm时，接收方Realm会获得一个指向原始对象的Proxy。
  • 这个Proxy拦截所有对它的操作（属性读取/写入、函数调用、new操作等），并将这些操作转发回原始对象所在的Realm执行。
  • 操作的结果（返回值、抛出的错误）再通过相同的机制传递回来。
  • 这种机制确保了：
    • 隔离性：原始对象始终待在它自己的Realm中，不会泄露其内部状态或原型链到其他Realm。
    • 受控性：宿主Realm可以通过Proxy精确地控制Shadow Realm能访问哪些宿主对象和API。
    • 同步/异步互操作：对于函数调用，如果函数是同步的，Proxy调用也是同步的；如果函数是异步的（返回Promise），Proxy也会返回一个Promise。

跨Realm值处理总结表

值类型 传递机制 备注
原始值 (string, number, boolean, null, undefined, symbol, bigint) 传值 (Value Copy) 直接复制，互不影响。
结构化克隆对象 (Date, RegExp, ArrayBuffer, Map, Set, Error等，以及不含函数/循环的普通对象) 传值 (Deep Copy) 通过结构化克隆算法进行深拷贝，互不影响。
函数 (包括箭头函数、普通函数、类构造函数) 传代理 (Proxy) 接收方获得一个可调用的Proxy。调用Proxy时，实际函数在原始Realm执行，其内部状态保持隔离。
包含闭包或内部状态的对象 传代理 (Proxy) 接收方获得一个Proxy。对Proxy的属性访问或方法调用会转发到原始Realm。
Promise 传代理 (Proxy) 接收方获得一个Promise Proxy。Promise的解决/拒绝状态在原始Realm处理，但接收方可以.then()监听。
DOM 节点 不可直接传递 Shadow Realms不直接拥有DOM。如果需要操作DOM，必须通过宿主Realm提供的Proxy API。
Symbol 实例 传代理 (Proxy) Symbol实例本身不可克隆，但可以通过Proxy传递。

3.4 模块导入（realm.importValue(specifier, name)）

Shadow Realms提案也包含了realm.importValue()方法，用于从Shadow Realm中导入模块的特定导出值。这需要Shadow Realm能够解析和加载模块，通常这依赖于宿主环境提供的能力。由于模块加载机制仍在提案演进中，这里我们主要聚焦于evaluate和Proxy作为核心通信手段。

概念上，如果你在Shadow Realm中定义了一个模块并导出了一个值：

// 在 Shadow Realm 中 (通过某种机制加载为模块)
// realm.evaluate(`export const greeting = 'Hello from Realm module!';`, { asModule: true });
// (假设一种方式在 Realm 中定义或加载模块)

然后宿主Realm可以通过 realm.importValue() 来获取：

// 宿主 Realm
// const { greeting } = await realm.importValue('./my-realm-module', 'greeting');
// console.log(greeting); // 'Hello from Realm module!'

这个API旨在与ES Modules系统无缝集成，允许在Realm边界之间安全地共享模块的导出值。目前，更常见的是通过evaluate返回一个Proxy来模拟模块的接口，或者直接将模块代码作为字符串传递给evaluate。

4. Shadow Realms的应用场景

Shadow Realms的强大隔离和受控通信能力使其在多种场景下都具有巨大的潜力。

4.1 沙箱化不受信任的代码

这是Shadow Realms最直接、最重要的应用。

  • 第三方插件/扩展：允许用户或第三方开发者提供JS代码作为插件，在完全隔离的环境中运行，避免插件污染主应用或窃取数据。通过Proxy机制，主应用可以精确地暴露有限的API给插件。
  • 用户脚本/自定义逻辑：在富文本编辑器、低代码平台或游戏等场景中，用户可能需要编写自定义脚本。Shadow Realms可以确保这些脚本的安全执行。
  • 广告脚本：在Web页面中安全地运行广告代码，防止其干扰页面功能或跟踪用户行为超出预期。

示例：一个简单的插件系统

// Host Realm - 主应用程序
const plugins = [];
const shadowRealm = new Realm();

// 主应用程序提供给插件的“安全”API
const hostAPI = {
    log: (message) => console.log(`[Host App Log]: ${message}`),
    fetchData: async (url) => {
        hostAPI.log(`[Host App]: Fetching data from: ${url}`);
        // 实际的网络请求在宿主 Realm 进行，并通过 Proxy 返回结果
        const response = await fetch(url);
        const data = await response.json();
        return data;
    },
    // 假设我们有一个简单的UI更新函数，但我们不直接暴露DOM
    updateUI: (data) => {
        console.log(`[Host App]: Updating UI with data: ${JSON.stringify(data)}`);
        // 实际的DOM操作在宿主 Realm
        const appDiv = document.getElementById('app');
        if (appDiv) {
            appDiv.innerHTML = `<h1>Plugin Data</h1><pre>${JSON.stringify(data, null, 2)}</pre>`;
        }
    }
};

/**
 * 加载并运行一个插件
 * @param {string} pluginCode 插件的 JavaScript 代码
 */
async function loadPlugin(pluginCode) {
    console.log(`[Host App]: Loading plugin...`);

    // 在 Shadow Realm 中执行插件代码，并传入 hostAPI 的 Proxy
    // 插件代码会获得一个 'host' 全局变量，它是 hostAPI 的 Proxy
    const pluginResult = shadowRealm.evaluate(`
        // 这段代码在 Shadow Realm 中执行
        // arguments[0] 就是宿主 Realm 传递进来的 hostAPI Proxy
        globalThis.host = arguments[0];

        try {
            // 插件可以访问 host.log, host.fetchData, host.updateUI
            host.log('Plugin started in Shadow Realm.');

            // 假设插件需要定义一个 init 函数
            globalThis.initPlugin = async () => {
                host.log('Plugin init function called.');
                const data = await host.fetchData('https://jsonplaceholder.typicode.com/todos/1');
                host.log(`Fetched data from host: ${JSON.stringify(data)}`);
                host.updateUI(data); // 通过 Proxy 调用宿主 UI 更新
                return 'Plugin finished successfully!';
            };

            // 插件也可以返回一个对象，宿主 Realm 会得到这个对象的 Proxy
            return {
                name: 'My Awesome Plugin',
                version: '1.0.0',
                init: globalThis.initPlugin // 导出 init 函数
            };
        } catch (e) {
            host.log(`[Plugin Error]: ${e.message}`);
            return { error: e.message };
        }
    `, hostAPI); // 将 hostAPI 作为参数传递

    // 宿主 Realm 接收到 pluginResult，其中 init 是一个 Proxy
    if (pluginResult.error) {
        console.error(`[Host App]: Failed to load plugin: ${pluginResult.error}`);
        return;
    }

    plugins.push(pluginResult);
    console.log(`[Host App]: Plugin "${pluginResult.name}" (v${pluginResult.version}) loaded.`);

    // 调用插件的 init 方法 (通过 Proxy)
    const initResult = await pluginResult.init();
    console.log(`[Host App]: Plugin init result: ${initResult}`);
}

// 示例插件代码
const myPluginCode = `
    host.log('Hello from plugin code running in Shadow Realm!');
    // 插件可以在这里定义自己的逻辑
    // 比如，它可以通过 host.fetchData 获取数据，然后通过 host.updateUI 更新UI
`;

// 模拟 DOM 元素
document.body.innerHTML = '<div id="app">Loading application...</div>';

// 启动插件加载
loadPlugin(myPluginCode);

这个例子展示了如何通过hostAPI的Proxy，让插件能够安全地与宿主应用进行交互，而无需直接访问宿主环境。

4.2 服务端渲染 (SSR) 和静态站点生成 (SSG)

在Node.js环境中，为了渲染组件或模板，我们通常需要在一个干净的环境中执行这些渲染逻辑，以防止全局污染，尤其是在处理多个用户请求时。Shadow Realms提供了一个理想的解决方案：

  • 隔离渲染：每个请求的渲染逻辑可以在一个独立的Shadow Realm中执行，保证了不同请求之间的数据和状态隔离。
  • 防止内存泄漏：当渲染完成后，Realm可以被垃圾回收，避免了渲染过程中可能产生的全局变量或闭包导致的内存泄漏。
  • Web Components 渲染：在服务端预渲染Web Components时，可以在Shadow Realm中执行组件的JS逻辑，生成初始HTML。

4.3 微前端和组件隔离

在构建大型复杂应用时，将不同的模块或微前端应用部署到独立的Shadow Realm中，可以实现：

  • 运行时隔离：确保不同团队开发的组件或微应用不会相互影响全局状态。
  • 版本管理：不同的组件可以依赖不同版本的库，而不会产生冲突。
  • 更细粒度的控制：宿主应用可以精确控制每个微应用或组件能够访问哪些API。

4.4 语言工具和REPL环境

  • 代码分析/转换：在分析或转换用户提供的JS代码时，可以在Shadow Realm中安全地执行和检查代码，而不会影响工具本身。
  • REPL (Read-Eval-Print Loop)：为用户提供一个交互式JS控制台，每次用户输入都在一个干净的Realm中执行。

4.5 模块加载和Polyfill管理

  • 安全的模块加载器：构建一个自定义的模块加载器，可以在Shadow Realm中加载和执行模块，隔离模块的副作用。
  • Polyfill沙箱：在需要特定Polyfill的组件或库，但又不想污染全局环境时，可以在Shadow Realm中应用这些Polyfill。

5. Shadow Realms与现有隔离机制的比较

为了更好地理解Shadow Realms的定位和优势，我们将其与之前讨论的几种隔离机制进行对比。

特性 / 机制 <iframe> Web Worker Shadow Realm eval() / new Function()
JS 全局隔离 完整 (独立全局对象) 完整 (独立全局对象) 完整 (独立全局对象) 无 (在当前全局对象执行)
DOM 隔离 完整 (独立文档，可沙箱) 无 (无法访问 DOM) 无 (无法直接访问 DOM) 无 (可访问并修改当前 DOM)
CSS 隔离 完整 N/A N/A 无
线程隔离 是 (浏览器通常为独立的进程或线程) 是 (独立线程) 否 (与宿主共享同一线程/事件循环) 否 (与当前代码共享同一线程)
通信机制 postMessage (异步，结构化克隆) postMessage (异步，结构化克隆) Proxy (同步/异步), 结构化克隆 直接变量访问 (同步)
资源开销 高 (完整浏览器上下文) 中 (新线程/进程) 低 (仅JS运行时环境) 非常低
安全性 高 (配合sandbox属性) 高 高 (原生，受控Proxy通信) 非常低 (高风险)
主要应用场景 嵌入第三方内容 (广告, 地图), 微前端 (UI隔离) 计算密集型任务, 后台数据处理 JS代码沙箱, 插件系统, SSR, Web组件逻辑隔离 简单动态代码生成 (应避免用于安全场景)
对宿主环境影响 最小 (通过sandbox可严格控制) 无 (不共享全局/DOM) 无 (不共享全局/DOM) 大 (直接修改宿主环境)

总结：

  • <iframe>提供了最全面的隔离，但代价是高昂的资源开销和通信复杂性。
  • Web Workers解决了CPU密集型任务的阻塞问题，但缺乏DOM访问能力。
  • eval()等是方便但危险的工具，不提供隔离。
  • Shadow Realms 填补了空白，它在JS运行时环境隔离方面提供了与<iframe>和Web Workers同等级别的安全性，但以更低的资源开销和更灵活的同步/异步通信方式实现。它专注于JavaScript本身的隔离，而不是整个浏览器上下文或独立的线程。

6. 错误处理与生命周期

6.1 错误处理

在Shadow Realm中抛出的错误，会像普通的JavaScript错误一样传播到宿主Realm。这意味着我们可以使用标准的try...catch块来捕获Shadow Realm中发生的异常。

// 宿主 Realm
const shadowRealm = new Realm();

try {
    shadowRealm.evaluate(`
        // 这段代码在 Shadow Realm 中执行
        console.log('[Realm] 准备抛出错误...');
        throw new Error('Something went wrong in the Shadow Realm!');
    `);
} catch (e) {
    console.error('n--- 宿主 Realm 捕获错误 ---');
    console.error('从 Shadow Realm 捕获到错误:', e.message);
    console.error('错误堆栈:', e.stack); // 堆栈会包含 Realm 的上下文信息
}

// 异步错误处理
shadowRealm.evaluate(`
    new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('[Realm] 异步操作完成，准备拒绝 Promise...');
            reject(new Error('Async error from Shadow Realm!'));
        }, 10);
    });
`).catch(e => {
    console.error('n--- 宿主 Realm 捕获异步错误 ---');
    console.error('从 Shadow Realm 捕获到异步错误:', e.message);
    console.error('错误堆栈:', e.stack);
});

错误堆栈通常会包含指示错误源自Shadow Realm的信息，帮助开发者进行调试。

6.2 生命周期管理

Shadow Realm的生命周期与普通的JavaScript对象类似。当一个Realm实例不再被任何引用时，它及其内部创建的所有对象都将被垃圾回收。

// 宿主 Realm
let realmInstance = new Realm();

realmInstance.evaluate(`
    let data = { largeObject: new Array(1000000).fill(0) }; // 创建一个大对象
    globalThis.keepAlive = data; // 保持引用，防止被 GC
    console.log('[Realm] 大对象已创建，并被 keepAlive 引用。');
`);

console.log('Realm 实例已创建，并有内部引用。');

// 此时，realmInstance 及其内部的大对象都不能被 GC

// 解除对 Realm 实例的引用
realmInstance = null;
console.log('宿主 Realm 解除了对 Realm 实例的引用。');

// 在某个时刻，如果 Shadow Realm 内部也没有其他外部引用指向其自身或其内部对象
// 那么整个 Realm 及其所有内容都将被垃圾回收。
// (注意：实际的 GC 发生时间由 JS 引擎决定，我们无法精确控制)

// 如果 Shadow Realm 内部有通过 Proxy 传递出去的引用，那么在这些 Proxy 被 GC 之前，
// Shadow Realm 也不会被 GC。

管理好对Realm实例及其内部对象的引用，是避免内存泄漏的关键。当不再需要一个Shadow Realm时，应确保宿主Realm中不再有对该Realm实例的引用，同时也要确保Shadow Realm内部没有通过Proxy等方式“泄露”到宿主Realm的引用（或者这些Proxy引用也已解除），这样才能让垃圾回收机制正常工作。

7. 安全考量与最佳实践

尽管Shadow Realms提供了强大的隔离机制，但“安全”永远是一个需要持续关注和实践的领域。

  • 最小权限原则 (Principle of Least Privilege)：
    • 在通过realm.evaluate传递参数或通过Proxy暴露API时，只提供Shadow Realm真正需要的最小集合。
    • 避免直接暴露宿主Realm的敏感对象或功能。例如，不要将整个window对象（即使是Proxy）传递给Shadow Realm。
  • 输入验证与输出清理：
    • 任何从宿主Realm传递到Shadow Realm的数据都应该经过严格的验证和清理。
    • 任何从Shadow Realm返回到宿主Realm并可能影响DOM或用户界面的数据，都应该进行严格的清理（例如XSS防护）。
  • 资源限制 (Resource Limits)：
    • Shadow Realms目前不直接提供CPU、内存、网络带宽等资源限制。对于可能执行恶意或资源消耗大的代码，你可能需要结合其他机制（如Web Workers的超时机制，或宿主环境的OS级限制）来加以约束。
    • 警惕无限循环或计算密集型任务，它们可能会阻塞共享的事件循环。
  • 避免“Realm-hopping”：
    • Shadow Realms的设计已经极大程度地防止了通过原型链或内置对象来“跳出”Realm。但作为开发者，应避免创建任何可能导致这种行为的漏洞。例如，不要在Proxy中错误地暴露原始内置对象。
  • 异步操作的封装：
    • 如果Shadow Realm需要执行网络请求、文件操作等异步任务，应通过宿主Realm提供的Proxy API来完成，而不是尝试在Realm内部模拟这些能力。这确保了所有敏感操作都经过宿主Realm的授权和监控。

8. 当前状态与未来展望

Shadow Realms提案目前在TC39（ECMAScript标准委员会）处于Stage 3阶段，这意味着它已经相对稳定，并被浏览器厂商积极实现。

  • 浏览器支持：Google Chrome/Chromium的V8引擎已经实现了Shadow Realms，并可在实验性标志下使用。其他浏览器（Firefox, Safari）也在关注和评估中。
  • Node.js支持：Node.js社区也对Shadow Realms表现出浓厚兴趣，有望在未来版本中引入，以支持更安全的模块加载和沙箱化执行。

随着提案的最终定稿和广泛实现，Shadow Realms将成为JavaScript生态系统中一个不可或缺的基石，为构建安全、健壮、可扩展的Web应用提供强大的原生支持。

9. 结语

阴影域名（Shadow Realms）是JavaScript运行时隔离领域的一项重要突破。它提供了一个原生、轻量且强隔离的执行环境，使得在同一个事件循环中安全地注入和执行不可信代码成为可能。通过理解其核心机制——独立的全局对象、结构化克隆传值以及基于Proxy的受控通信，开发者能够构建出更加健壮、模块化和安全的应用程序。随着Shadow Realms在浏览器和Node.js环境中的普及，我们期待看到它在插件系统、微前端、SSR以及各种沙箱场景下发挥巨大作用，显著提升JavaScript应用的隔离性与安全性。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注