Electron-Angular：基于预加载脚本的IPC通信安全实现方案问询

1. 调整Electron窗口配置 #

先修改窗口创建时的webPreferences，开启上下文隔离、指定预加载脚本，同时关闭Node集成，这是安全通信的基础配置：

// main.js 主进程代码
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 关闭Node集成，避免暴露完整Node环境
      contextIsolation: true, // 开启上下文隔离（Electron默认值，显式声明更清晰）
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
    }
  });

  mainWindow.loadURL('http://localhost:4200'); // 加载Angular开发服务地址
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

2. 编写预加载脚本（preload.js） #

用Electron的contextBridge把必要的IPC通信API安全暴露给Angular渲染进程，只对外开放需要的方法，不泄露Node.js核心能力：

// preload.js 预加载脚本
const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程暴露命名为electronAPI的安全接口
contextBridge.exposeInMainWorld('electronAPI', {
  // 渲染进程向主进程发送消息
  sendToMain: (channel, data) => {
    // 限制允许的通信频道，防止恶意调用
    const validChannels = ['message-from-angular'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  // 渲染进程监听主进程发来的消息
  receiveFromMain: (channel, callback) => {
    const validChannels = ['message-from-main'];
    if (validChannels.includes(channel)) {
      // 过滤回调参数，避免暴露敏感数据
      ipcRenderer.on(channel, (event, ...args) => callback(...args));
    }
  }
});

3. Angular中调用暴露的API #

在Angular项目中先声明全局变量类型，避免TypeScript报错，再直接调用electronAPI实现通信：

首先在src/typings.d.ts中添加类型声明：

// src/typings.d.ts
declare global {
  interface Window {
    electronAPI: {
      sendToMain: (channel: string, data: any) => void;
      receiveFromMain: (channel: string, callback: (...args: any[]) => void) => void;
    };
  }
}

export {};

然后在Angular组件中使用：

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  messageFromMain: string = '';

  ngOnInit(): void {
    // 监听主进程发来的消息
    window.electronAPI.receiveFromMain('message-from-main', (data) => {
      this.messageFromMain = data;
    });
  }

  // 向主进程发送消息
  sendMessageToMain(): void {
    window.electronAPI.sendToMain('message-from-angular', 'Hello from Angular!');
  }
}

对应的HTML模板：

<!-- src/app/app.component.html -->
<h1>Angular + Electron 通信测试</h1>
<p>来自主进程的消息: {{ messageFromMain }}</p>
<button (click)="sendMessageToMain()">发送消息给主进程</button>

4. 主进程处理IPC消息 #

在主进程（main.js）中添加消息监听与回复逻辑：

// main.js 中新增
ipcMain.on('message-from-angular', (event, data) => {
  console.log('收到Angular消息:', data);
  // 回复消息给Angular渲染进程
  event.reply('message-from-main', `主进程已收到：${data}`);
});

关键说明 #

• 上下文隔离（contextIsolation: true）是Electron的默认安全机制，能隔绝渲染进程与Node.js环境的直接交互，避免安全风险。
• 预加载脚本在渲染进程加载前执行，拥有Node.js权限，但通过contextBridge仅暴露你明确指定的API，确保最小权限原则。
• 限制IPC通信频道（validChannels）可防止恶意脚本调用未授权的通信逻辑，进一步提升安全性。

内容的提问来源于stack exchange，提问作者nicolabaesso