Electron 如何安全地将全局变量注入 BrowserWindow / BrowserView ？

在 Electron 中，一种安全地将全局变量注入到 BrowserWindow 或 BrowserView 的方式是通过使用 preload 脚本。preload 脚本在页面加载之前运行，它可以访问 Node.js 的特性和全局变量，并且能将必要的变量或功能安全地暴露给渲染器进程。

下面是关于如何实现这一过程的步骤：

步骤 1: 创建一个 preload.js 脚本

在这个脚本中，你可以定义需要在渲染器进程中使用的全局变量。比如，你想要将一个全局的配置对象注入到页面中，你可以在 preload.js 文件中定义它。

javascript
// preload.js
const { contextBridge } = require('electron');

const globalConfig = {
    apiBaseUrl: 'https://api.example.com',
    apiKey: 'secret-key'
};

contextBridge.exposeInMainWorld('globalConfig', globalConfig);

步骤 2: 在 BrowserWindow 或 BrowserView 中使用 preload 脚本

当你创建一个 BrowserWindow 或 BrowserView 实例时，通过 webPreferences 的 preload 选项指定 preload.js 脚本。

javascript
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    win.loadURL('https://your-website.com');
}

app.whenReady().then(createWindow);

步骤 3: 在页面中使用注入的全局变量

由于你已经通过 contextBridge 安全地暴露了 globalConfig 作为全局变量，现在你可以在页面的 JavaScript 中直接访问它。

javascript
// 在页面中
console.log(globalConfig.apiBaseUrl); // 输出: https://api.example.com

安全注意事项

使用 preload 脚本来注入全局变量是一种安全的方式，因为它允许你精确地控制渲染器进程可以访问哪些资源，而不必完全启用 Node.js 集成，从而减少了潜在的安全风险。确保只暴露必要的变量和方法，并尽可能限制对 Node.js API 的直接访问。

通过上述步骤，你可以有效而安全地将全局变量注入到 Electron 的 BrowserWindow 或 BrowserView 中，从而为开发提供便利同时保障应用的安全性。