如何在Electron中正确使用preload.js

在Electron中使用preload.js脚本的目的是在渲染器进程（通常是网页）与主进程之间提供一个安全的沟通桥梁。这允许你在保持渲染器进程中的nodeIntegration禁用（出于安全原因）的同时，仍然能够访问Node.js的特定功能。

下面是如何正确使用preload.js的步骤：

1. 创建 preload.js 文件

在你的Electron应用的源代码中，创建一个名为 preload.js 的文件。这个文件将会在渲染器进程中加载，但在任何网页内容加载之前执行。

2. 向 preload.js 中添加逻辑

在preload.js中，你可以使用Node.js的API来暴露一些功能给渲染器进程。例如，你可能想通过contextBridge API安全地暴露ipcRenderer接口：

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

contextBridge.exposeInMainWorld('electronAPI', {
    sendMessage: (channel, data) => {
        // Whitelist channels
        let validChannels = ['toMain', 'anotherChannel']; // 定义合法的通道名称列表
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receiveMessage: (channel, func) => {
        let validChannels = ['fromMain', 'anotherChannel'];
        if (validChannels.includes(channel)) {
            // Deliberately strip event as it includes `sender`
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    }
});

3. 在 BrowserWindow 中指定 preload.js

创建 BrowserWindow 时，需要在 webPreferences 配置中指定 preload 脚本的路径，同时确保nodeIntegration 是禁用的：

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'),
      nodeIntegration: false,
      contextIsolation: true // 重要: 这会保护你的应用免于上下文污染
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

4. 在渲染器进程中使用通过 preload.js 暴露的功能

现在，你可以在渲染器进程中的网页脚本里安全地访问preload.js暴露的功能，例如：

javascript
// 渲染器进程中的脚本
window.electronAPI.sendMessage('toMain', 'Hello, main process!');
window.electronAPI.receiveMessage('fromMain', (data) => {
    console.log(`Received ${data} from main process`);
});

这样，你就能够在保持良好安全性能的同时在Electron应用的不同部分之间通信了。

注意事项

• 始终验证在preload.js中使用的通道名，并仅暴露必要的IPC通道给渲染器进程。
• 确保contextIsolation被设置为true，以避免脚本在全局上下文中运行时可能出现的安全问题。
• nodeIntegration应该保持禁用状态，以防止渲染器进程直接访问Node.js API，这会增加安全风险。