发布于 由admin

解释 `JavaScript Runtime` 的 `Global Object` (`window`, `globalThis`) 和 `Realm` (提案) 的安全边界。

各位朋友，大家好！今天咱们来聊聊 JavaScript 运行时的几个关键概念，以及它们之间的安全边界。这几个家伙经常在幕后默默工作，但理解它们对于构建安全可靠的 Web 应用至关重要。咱们要聊的就是：Global Object (window, globalThis)，还有 Realm (虽然还是个提案，但已经很有潜力了)。

想象一下，JavaScript 运行时就像一个大的游乐场。在这个游乐场里，代码可以自由地奔跑，创建各种玩具（对象），互相交流。但是，如果没有规则，这个游乐场就会变成一片混乱。Global Object 和 Realm 的作用，就是为这个游乐场建立秩序，划分区域，确保每个孩子（代码）都在自己的地盘上玩耍，不会干扰到别人。

一、Global Object：一切的起点

首先，咱们来认识一下 Global Object。它就像这个游乐场的中心广场，所有的孩子（全局变量和函数）都可以在这里亮相。在浏览器环境中，这个中心广场的名字通常叫做 window；而在 Node.js 环境中，它叫做 global。最近，JavaScript 引入了一个更通用的名字 globalThis，它可以在各种环境中指向全局对象。

window (浏览器)、 global (Node.js)、globalThis (通用) 都是 Global Object 的不同实现，它们本质上都是在不同的环境里提供了一个全局作用域。

// 在浏览器中
console.log(window); // 输出 window 对象
console.log(this === window); // 大部分情况下，this 指向 window

// 在 Node.js 中
console.log(global); // 输出 global 对象
console.log(this === module.exports); // 在模块中，this 指向 module.exports，而不是 global

// 使用 globalThis
console.log(globalThis); // 在浏览器和 Node.js 中都能正确指向全局对象

Global Object 提供了许多内置的属性和方法，比如 setTimeout、console、Math 等等。这些都是孩子们（代码）可以使用的公共资源。

// 使用 setTimeout
setTimeout(() => {
  console.log("Hello from setTimeout!");
}, 1000);

// 使用 Math
console.log(Math.PI);

Global Object 的安全边界：有限的隔离

虽然 Global Object 提供了很多便利，但它也是一个潜在的安全风险点。因为所有的代码都可以访问和修改 Global Object 上的属性，这可能会导致意外的冲突和安全漏洞。

举个例子，假设有两个 JavaScript 库，它们都想在 window 对象上添加一个名为 myFunction 的函数。如果它们没有协调好，就会发生冲突，其中一个库的函数会被覆盖掉。

// 第一个库
window.myFunction = () => {
  console.log("Hello from library 1!");
};

// 第二个库
window.myFunction = () => {
  console.log("Hello from library 2!");
};

window.myFunction(); // 输出 "Hello from library 2!"

为了避免这种情况，开发者通常会使用命名空间或其他方式来避免全局命名冲突。

此外，一些恶意脚本可能会利用 Global Object 来窃取用户的信息或执行恶意操作。例如，它们可能会修改 XMLHttpRequest 对象，从而拦截用户的网络请求。

// 恶意脚本
const originalXMLHttpRequest = window.XMLHttpRequest;
window.XMLHttpRequest = function() {
  const xhr = new originalXMLHttpRequest();
  xhr.addEventListener("load", () => {
    // 窃取网络请求的数据
    console.log("Intercepted data:", xhr.responseText);
  });
  return xhr;
};

因此，在使用第三方库或加载外部脚本时，我们需要格外小心，确保它们不会恶意修改 Global Object。

二、Realm：更强的隔离

为了提供更强的隔离，JavaScript 引入了 Realm 的概念 (目前仍然是一个提案)。Realm 可以理解为游乐场里的独立区域，每个区域都有自己的 Global Object 和内置对象。不同 Realm 之间的代码无法直接访问彼此的 Global Object，从而实现了更强的隔离。

想象一下，现在游乐场里有了好几个独立的沙坑，每个沙坑都有自己的沙子和玩具。孩子们只能在自己的沙坑里玩耍，不能跑到别人的沙坑里抢玩具。

// 创建一个新的 Realm (需要支持 Realm 的环境)
const realm = new Realm();

// 在新的 Realm 中执行代码
realm.evaluate(`
  globalThis.myVariable = "Hello from Realm!";
  console.log(globalThis.myVariable); // 输出 "Hello from Realm!"
`);

// 在主 Realm 中访问新的 Realm 的变量 (无法直接访问)
console.log(globalThis.myVariable); // 输出 undefined

Realm 的安全边界：更严格的隔离

Realm 提供了比 Global Object 更强的安全边界。它可以防止不同来源的代码互相干扰，从而提高 Web 应用的安全性。

例如，我们可以使用 Realm 来运行不受信任的第三方代码，而不用担心它们会影响到主应用程序。

// 创建一个新的 Realm
const realm = new Realm();

// 在新的 Realm 中运行不受信任的代码
realm.evaluate(`
  // 这段代码可能会恶意修改 Global Object，但它只会影响到新的 Realm
  globalThis.XMLHttpRequest = null;
`);

// 主应用程序的 XMLHttpRequest 对象不会受到影响
console.log(window.XMLHttpRequest); // 输出 XMLHttpRequest 对象

Realm 还可以用于实现沙箱环境，例如 Web Workers 和 Service Workers。这些 Worker 运行在独立的 Realm 中，与主线程隔离，从而避免了阻塞主线程和提高 Web 应用的响应速度。

三、Global Object vs. Realm：对比

为了更清楚地理解 Global Object 和 Realm 的区别，咱们可以用一个表格来总结一下：

特性 Global Object Realm
定义 JavaScript 运行时的全局作用域，所有全局变量和函数都存储在这里。 一个独立的 JavaScript 执行环境，拥有自己的 Global Object 和内置对象。
隔离级别 弱隔离。所有代码都可以访问和修改 Global Object 上的属性，容易发生冲突和安全漏洞。 强隔离。不同 Realm 之间的代码无法直接访问彼此的 Global Object，从而实现了更强的隔离。
应用场景 提供全局变量和函数，方便代码之间的交流。 运行不受信任的第三方代码，实现沙箱环境，例如 Web Workers 和 Service Workers。
安全风险 容易受到恶意脚本的攻击，例如窃取用户的信息或执行恶意操作。 降低了安全风险，因为恶意脚本只能影响到自己的 Realm，而无法影响到其他 Realm。
实现方式 在浏览器中是 window 对象，在 Node.js 中是 global 对象，通用的是 globalThis。 通过 Realm 构造函数创建新的 Realm。 (提案阶段，需要支持 Realm 的环境)
举例 setTimeout、console、Math Web Workers, Service Workers, 运行第三方插件

四、实际应用中的考量

了解了 Global Object 和 Realm 的概念之后，咱们来看看在实际应用中应该如何考虑它们的安全边界。

  1. 谨慎使用全局变量： 尽量避免使用全局变量，而是使用模块化或其他方式来组织代码，减少全局命名冲突的可能性。
// 不好的例子
var myVariable = "Hello!"; // 全局变量

// 好的例子
const myModule = {
  myVariable: "Hello!"
};
  1. 使用命名空间： 如果必须使用全局变量，可以使用命名空间来避免冲突。
// 使用命名空间
const myLibrary = {
  myFunction: () => {
    console.log("Hello from myLibrary!");
  }
};

myLibrary.myFunction();
  1. 避免修改内置对象： 尽量不要修改内置对象，例如 Array、String 等。如果需要扩展内置对象的功能，可以使用原型链，但要注意避免与其他库的冲突。
// 不好的例子
Array.prototype.myFunction = () => {
  console.log("Hello from myFunction!");
};

// 好的例子
class MyArray extends Array {
  myFunction() {
    console.log("Hello from myFunction!");
  }
}
  1. 使用 CSP： 使用内容安全策略 (CSP) 来限制浏览器可以加载的资源，从而防止恶意脚本的注入。
<!-- 设置 CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://example.com; style-src 'self' 'unsafe-inline'">

  1. 使用 Realm (如果可用)： 如果你的环境支持 Realm，可以使用 Realm 来运行不受信任的第三方代码，从而提高 Web 应用的安全性。

  2. Web Workers & Service Workers: 它们都是运行在独立 Realm 中的，所以天然的就具有隔离性。利用它们处理计算密集型任务，或者离线缓存，可以有效提高应用程序的性能和安全性。

五、总结

Global Object 和 Realm 是 JavaScript 运行时中重要的概念，它们定义了代码的安全边界。理解它们的作用和限制，可以帮助我们构建更安全可靠的 Web 应用。

  • Global Object (window, global, globalThis) 提供了一个全局作用域，方便代码之间的交流，但也存在安全风险。
  • Realm (提案) 提供了更强的隔离，可以防止不同来源的代码互相干扰，从而提高 Web 应用的安全性。

希望今天的讲解对大家有所帮助。记住，安全无小事，只有不断学习和实践，才能构建更安全的 Web 应用。

最后，请记住，即使掌握了这些概念，安全仍然是一个持续改进的过程。保持警惕，及时更新你的知识，才能应对不断变化的安全威胁。感谢大家的收听！

发表回复

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