如何在Electron中监听加载URL触发的window.postMessage事件？

你可以通过Electron提供的API实现对托管Web应用postMessage消息的监听，主要有两种场景的实现方式：

1. 在主进程中直接监听 #

当你创建BrowserWindow后，其对应的webContents对象提供了message事件，专门用于捕获加载页面发送的window.postMessage消息。

示例代码：

const { BrowserWindow } = require('electron');

// 创建窗口并加载Web应用
const appWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false, // 保持禁用以保障安全
    contextIsolation: true
  }
});
appWindow.loadURL('https://your-target-webapp.com');

// 监听Web应用发送的postMessage
appWindow.webContents.on('message', (event, message, sourceOrigin, targetOrigin) => {
  console.log('收到Web应用消息:', message);
  
  // 安全校验：只处理可信来源的消息
  if (sourceOrigin === 'https://your-target-webapp.com') {
    // 这里编写你的消息处理逻辑
  }
});

2. 在渲染进程中监听（通过主进程转发） #

如果需要在Electron应用的渲染进程中处理消息，可以先在主进程捕获message事件，再通过IPC机制转发到渲染进程。

主进程代码： #

const { BrowserWindow, ipcMain } = require('electron');
const path = require('path');

const appWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js') // 需要预加载脚本暴露IPC通道
  }
});
appWindow.loadURL('https://your-target-webapp.com');

// 捕获消息并转发到渲染进程
appWindow.webContents.on('message', (event, message) => {
  appWindow.webContents.send('forwarded-webapp-message', message);
});

预加载脚本（preload.js）： #

const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程暴露安全的IPC接口
contextBridge.exposeInMainWorld('electronAPI', {
  onWebAppMessage: (callback) => {
    ipcRenderer.on('forwarded-webapp-message', callback);
  }
});

渲染进程代码： #

// 在渲染进程中监听转发的消息
window.electronAPI.onWebAppMessage((event, message) => {
  console.log('渲染进程收到Web应用消息:', message);
  // 执行你的自定义处理逻辑，效果等同于window.addEventListener('message')
});

注意事项 #

• 安全校验：务必验证sourceOrigin，只处理来自可信域名的消息，避免恶意内容注入。
• targetOrigin设置：如果Web应用的postMessage指定了targetOrigin，需要确保其与Electron窗口的origin匹配（或Web应用使用'*'，但生产环境不推荐）。

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