Electron开启nodeIntegration仍报ipcRenderer未定义错误如何解决？

问题成因 #

• Electron v12及以上版本中，webPreferences.contextIsolation的默认值为true，该配置会隔离渲染进程的JS上下文与Node.js上下文，哪怕开启了nodeIntegration，渲染进程也无法直接访问任何Node.js API，自然也拿不到ipcRenderer对象。
• 即便关闭了contextIsolation，ipcRenderer也不是全局挂载的变量，需要在渲染进程中主动通过require('electron')导入才能使用，不导入直接调用也会抛出未定义错误。

解决方案 #

方案1：使用预加载脚本（官方推荐，符合安全规范） #

该方案不需要关闭默认的上下文隔离配置，安全性最高，是Electron官方推荐的通信方式。

1. 项目根目录新建preload.js预加载脚本，通过contextBridge向渲染进程按需暴露需要的ipc能力，不要直接暴露整个ipcRenderer对象：

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

contextBridge.exposeInMainWorld('electronAPI', {
  // 按需定义需要的通信方法
  send: (channel, data) => ipcRenderer.send(channel, data),
  receive: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
})

2. 修改BrowserWindow的配置，添加preload字段关联上面的脚本：

const path = require('path')

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 300,
    height: 200,
    webPreferences: {
      // 用预加载脚本的话可以直接关闭nodeIntegration，进一步提升安全性
      nodeIntegration: false,
      preload: path.join(__dirname, 'preload.js')
    }
  });
})

3. 渲染进程中直接通过挂载到window上的electronAPI调用即可：

// 渲染层代码
window.electronAPI.send('test-channel', '发送的内容')
window.electronAPI.receive('reply-channel', (data) => {
  console.log('收到主进程回复：', data)
})

方案2：关闭上下文隔离（不推荐，仅适合本地测试/纯本地内容应用） #

如果是个人使用的小工具、完全不加载任何外部内容，可以用这种更简单的方案，但存在极高的安全风险，一旦渲染层出现XSS漏洞，攻击者可以直接获取系统完整权限。

1. 修改BrowserWindow配置，显式关闭contextIsolation：

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 300,
    height: 200,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
})

2. 在渲染进程中主动导入ipcRenderer后使用：

const { ipcRenderer } = require('electron')
// 后续正常调用ipcRenderer的方法即可

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