如何在 Electron 应用中安全地进行主进程与渲染器进程通信

预加载脚本是 Electron 开发中用于在主进程和渲染器进程之间进行通信和功能共享的一种特殊脚本。它主要用于在安全的环境下，将主进程的某些功能或数据暴露给渲染器进程，同时避免直接将主进程的完整权限暴露给渲染器进程，从而降低安全风险。

为什么需要预加载脚本？

在 Electron 应用中，主进程和渲染器进程是隔离的：
主进程：拥有完整的操作系统权限，可以访问 Node.js 的所有模块和功能，例如文件系统操作、网络请求等。
渲染器进程：运行的是网页内容，默认情况下是不运行 Node.js 的，以防止网页代码直接访问操作系统资源，从而保护用户的安全。

然而，在实际开发中，渲染器进程可能需要访问主进程的某些功能或数据。如果直接让渲染器进程运行 Node.js，会带来严重的安全风险。因此，预加载脚本成为了一个安全的中间层，用于在主进程和渲染器进程之间进行通信。

以下是五个开发需求场景，通过这些场景可以更直观地理解 Electron 中预加载脚本的作用和重要性：

场景一：文件操作需求

需求描述：在 Electron 应用中，用户需要通过渲染器进程中的按钮点击事件来选择本地文件，并将文件路径传递给主进程进行进一步处理。

解决方案：

1. 主进程：使用 dialog.showOpenDialog 来实现文件选择功能。
2. 渲染器进程：无法直接调用主进程的 dialog 模块，因此需要通过预加载脚本暴露一个安全的接口。
3. 预加载脚本：

   // preload.js
   const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {openFile: () => ipcRenderer.invoke('open-file')
   });
   

4. 主进程：

   // main.js
   const { app, BrowserWindow, dialog } = require('electron');let mainWindow;app.on('ready', () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: __dirname + '/preload.js',contextIsolation: true,nodeIntegration: false,}});mainWindow.loadFile('index.html');ipcMain.handle('open-file', async () => {const { canceled, filePaths } = await dialog.showOpenDialog();if (!canceled && filePaths.length > 0) {return filePaths[0];}return null;});
   });
   

5. 渲染器进程：

   <!-- index.html -->
   <button id="open-file-button">Open File</button>
   <script>document.getElementById('open-file-button').addEventListener('click', async () => {const filePath = await window.electronAPI.openFile();if (filePath) {console.log('Selected file:', filePath);}});
   </script>
   

说明：通过预加载脚本，渲染器进程可以安全地调用主进程的文件选择功能，而无需直接访问主进程的 Node.js 模块，从而保证了应用的安全性。

---

场景二：跨进程数据共享

需求描述：主进程需要将某些全局配置数据（如用户设置）传递给渲染器进程，以便在页面中动态显示。

解决方案：

1. 主进程：将配置数据存储在主进程中。
2. 预加载脚本：

   // preload.js
   const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {getConfig: () => ipcRenderer.invoke('get-config')
   });
   

3. 主进程：

   // main.js
   const { app, BrowserWindow, ipcMain } = require('electron');let mainWindow;
   const config = { theme: 'dark', language: 'en' };app.on('ready', () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: __dirname + '/preload.js',contextIsolation: true,nodeIntegration: false,}});mainWindow.loadFile('index.html');ipcMain.handle('get-config', () => {return config;});
   });
   

4. 渲染器进程：

   <!-- index.html -->
   <div id="theme">Theme: <span id="theme-value"></span></div>
   <div id="language">Language: <span id="language-value"></span></div>
   <script>(async () => {const config = await window.electronAPI.getConfig();document.getElementById('theme-value').textContent = config.theme;document.getElementById('language-value').textContent = config.language;})();
   </script>
   

说明：预加载脚本允许渲染器进程通过 IPC 安全地获取主进程中的数据，而无需直接访问主进程的上下文。

---

场景三：通知功能

需求描述：当主进程完成某些任务（如文件下载完成）时，需要通知渲染器进程更新页面内容或显示提示信息。

解决方案：

1. 主进程：在任务完成后发送通知。
2. 预加载脚本：

   // preload.js
   const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {onNotification: (callback) => ipcRenderer.on('notification', callback)
   });
   

3. 主进程：

   // main.js
   const { app, BrowserWindow, ipcMain } = require('electron');let mainWindow;app.on('ready', () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: __dirname + '/preload.js',contextIsolation: true,nodeIntegration: false,}});mainWindow.loadFile('index.html');// 模拟任务完成setTimeout(() => {ipcMain.emit('notification', 'Download complete!');}, 5000);
   });
   

4. 渲染器进程：

   <!-- index.html -->
   <div id="notification"></div>
   <script>window.electronAPI.onNotification((event, message) => {document.getElementById('notification').textContent = message;});
   </script>
   

说明：预加载脚本允许主进程通过 IPC 向渲染器进程发送通知，而渲染器进程可以通过监听事件来接收通知并进行处理。

---

场景四：安全的外部链接访问

需求描述：在渲染器进程中，用户点击一个链接时，需要通过主进程打开默认浏览器，而不是直接在应用中打开。

解决方案：

1. 主进程：使用 shell.openExternal 来打开外部链接。
2. 预加载脚本：

   // preload.js
   const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {openExternalLink: (url) => ipcRenderer.send('open-external-link', url)
   });
   

3. 主进程：

   // main.js
   const { app, BrowserWindow, shell, ipcMain } = require('electron');let mainWindow;app.on('ready', () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: __dirname + '/preload.js',contextIsolation: true,nodeIntegration: false,}});mainWindow.loadFile('index.html');ipcMain.on('open-external-link', (event, url) => {shell.openExternal(url);});
   });
   

4. 渲染器进程：

   <!-- index.html -->
   <a href="#" id="external-link">Visit External Site</a>
   <script>document.getElementById('external-link').addEventListener('click', (e) => {e.preventDefault();window.electronAPI.openExternalLink('https://example.com');});
   </script>
   

说明：通过预加载脚本，渲染器进程可以安全地请求主进程打开外部链接，而无需直接访问主进程的 shell 模块，从而避免潜在的安全风险。

---

圽景五：动态更新应用状态

需求描述：主进程需要动态更新应用状态（如网络连接状态），并将这些状态实时传递给渲染器进程，以便在页面上显示。

解决方案：

1. 主进程：动态更新状态并通过 IPC 发送。
2. 预加载脚本：

   // preload.js
   const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {onStatusUpdate: (callback) => ipcRenderer.on('status-update', callback)
   });
   

3. 主进程：

   // main.js
   const { app, BrowserWindow, ipcMain } = require('electron');let mainWindow;
   let isConnected = true;app.on('ready', () => {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: __dirname + '/preload.js',contextIsolation: true,nodeIntegration: false,}});mainWindow.loadFile('index.html');setInterval(() => {isConnected = !isConnected; // 模拟网络状态变化ipcMain.emit('status-update', { isConnected });}, 5000);
   });
   

4. 渲染器进程：

   <!-- index.html -->
   <div id="status">Network Status: <span id="status-value"></span></div>