使用Electron的ipcRenderer.postMessage时提示transfer参数无效如何解决？

ipcRenderer.postMessage报该错误的核心原因是第三个参数（transfer传输列表）中的元素不符合Electron的校验规则，你的场景下是Electron默认开启的上下文隔离特性导致的MessagePort类型不匹配。

触发原因 #

Electron 12+ 版本默认开启contextIsolation: true，此时preload脚本的执行上下文和渲染页的执行上下文完全隔离：

• 如果你在渲染页上下文创建MessageChannel实例，再调用通过contextBridge暴露的ipcRenderer.postMessage方法，跨上下文传递的MessagePort实例不属于Electron内置的MessagePort构造函数生成的实例，无法被识别为合法的可传输对象。
• 如果你已经关闭上下文隔离，需要检查传输的port1是否已经被转移过一次，MessagePort实例仅支持单次传输。

修复方法 #

方案1（推荐，无安全风险） #

直接在preload上下文内完成MessageChannel创建和postMessage调用，避免跨上下文传输port：

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

contextBridge.exposeInMainWorld('electronAPI', {
  transferPort: () => {
    const { port1, port2 } = new MessageChannel();
    // 在preload上下文直接调用ipcRenderer.postMessage，port类型符合要求
    ipcRenderer.postMessage('port', { message: 'hello' }, [port1]);
    // 若渲染页需要使用port2通信，直接返回即可
    return port2;
  }
})

渲染页直接调用暴露的方法即可：

// 渲染页代码
const port2 = window.electronAPI.transferPort();
port2.onmessage = (e) => {
  console.log('收到主进程消息', e.data);
}

方案2（不推荐，仅适合本地自用应用） #

关闭上下文隔离，直接允许渲染页访问原生API，该方案存在XSS安全风险，禁止用于加载外部内容的应用：

// 主进程创建窗口配置
const mainWindow = new BrowserWindow({
  // 其他窗口配置
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: false,
    nodeIntegration: true
  }
})

主进程接收Port补充说明 #

主进程需要通过event.ports接收传输的port，且必须调用start()方法才会开始接收消息：

// 主进程代码示例
const { ipcMain } = require('electron');

ipcMain.on('port', (event, data) => {
  console.log('收到渲染进程数据', data);
  const port1 = event.ports[0];
  // 监听port消息
  port1.on('message', (msg) => {
    console.log('收到port消息', msg);
  })
  // 必须调用start启动消息监听
  port1.start();
  // 可通过port向渲染进程发消息
  port1.postMessage('主进程已收到port');
})

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