Electron 渲染进程通信：使用 contextBridge 配置安全的 API

在 Electron 应用开发中，主进程和渲染进程之间的通信是一个常见的需求。为了保证安全性，Electron 提供了多种通信方式，其中 contextBridge 是一种重要的安全机制，允许开发者在预加载脚本中暴露安全的 API 给渲染进程使用。

问题背景

在传统的 Electron 应用中，渲染进程（前端）和主进程（后端）之间通过 IPC（进程间通信）来交换信息。为了确保渲染进程不直接访问 Node.js 环境（这可能导致安全问题），Electron 提供了 contextBridge 来安全地暴露特定的 API。

解决方案：使用 contextBridge 配置预加载脚本

1. 设置预加载脚本

在 Electron 中，我们通过配置 preload 脚本来暴露安全的 API。这个预加载脚本运行在渲染进程的上下文中，但不会暴露 Node.js 环境。我们可以通过 contextBridge API 将主进程的功能传递给渲染进程。

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

contextBridge.exposeInMainWorld('electron', {
  sendMessage: (channel, data) => ipcRenderer.send(channel, data),
  onMessage: (channel, callback) => ipcRenderer.on(channel, callback)
});

在上面的代码中，我们暴露了 sendMessage 和 onMessage 方法，允许渲染进程发送消息到主进程以及接收消息。

2. 配置主进程

主进程需要监听渲染进程发送的消息并返回结果。通常我们会使用 ipcMain 来处理与渲染进程的通信。

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    preload: path.join(__dirname, 'preload.js') // 设置预加载脚本
  });

  win.loadURL('http://localhost:3000');
}

app.whenReady().then(() => {
  ipcMain.on('send-message', (event, data) => {
    console.log('Received data from renderer:', data);
    event.reply('receive-message', 'Hello from main process');
  });

  createWindow();
});

3. 渲染进程使用暴露的 API

渲染进程通过 window.electron 访问主进程暴露的 API。这确保了渲染进程不会直接调用 Node.js 模块，增强了安全性。

// renderer.js
document.getElementById('sendBtn').addEventListener('click', () => {
  window.electron.sendMessage('send-message', 'Hello from renderer');
});

window.electron.onMessage('receive-message', (event, message) => {
  console.log(message); // 打印从主进程接收到的消息
});

总结

通过 contextBridge 和预加载脚本，我们可以确保 Electron 渲染进程与主进程之间的通信是安全的。渲染进程不会直接访问 Node.js 环境，减少了潜在的安全风险。这种方法不仅符合安全最佳实践，还可以灵活地暴露必要的功能。