Core Concepts

// main.js
const { ipcMain, dialog } = require('electron')

ipcMain.handle('dialog:openFile', async (event) => {
  const { canceled, filePaths } = await dialog.showOpenDialog({ properties: ['openFile'] })
  return canceled ? null : filePaths[0]
})

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

contextBridge.exposeInMainWorld('api', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  setTitle: (title) => ipcRenderer.send('set-title', title),
  onUpdateCounter: (callback) => {
    ipcRenderer.on('update-counter', (_event, value) => callback(value))
  },
})

Fire-and-forget messages use ipcRenderer.send with ipcMain.on. When the main process needs to notify a renderer first, it calls win.webContents.send, and the preload listens with ipcRenderer.on and forwards the value to a callback.

// main.js
ipcMain.on('set-title', (event, title) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  win.setTitle(title)
})

win.webContents.send('update-counter', 1)

// renderer.js
document.getElementById('open').addEventListener('click', async () => {
  const filePath = await window.api.openFile()
  if (filePath) document.getElementById('file').textContent = filePath
})
window.api.onUpdateCounter((value) => console.log('counter:', value))

contextBridge and context isolation

With context isolation enabled, the preload script and the web page run in separate JavaScript worlds. Scripts on the page cannot tamper with the preload's variables or with Electron APIs. The only passage between the two worlds is contextBridge.exposeInMainWorld; only the functions and values passed through it are visible to the page.

Exposing the entire ipcRenderer object would let the page send messages on any channel and defeat the isolation. Expose narrow, purpose-built functions as in the example above, and do not hand the raw event object to page callbacks.

The security checklist

The heart of Electron's official security checklist:

1. Do not enable nodeIntegration in renderers.
2. Do not disable contextIsolation or sandbox.
3. Load remote content only over HTTPS, and never give untrusted content access to preload features.
4. Set a Content Security Policy on every page.
5. Validate the sender (event.senderFrame) and the arguments of every IPC message.
6. Restrict new windows and navigation to unexpected destinations.
7. Pass only validated URLs to shell.openExternal.
8. Keep Electron on a currently supported version.

win.webContents.setWindowOpenHandler(({ url }) => {
  if (url.startsWith('https://example.com/')) shell.openExternal(url)
  return { action: 'deny' }
})

win.webContents.on('will-navigate', (event, url) => {
  if (!url.startsWith('file://')) event.preventDefault()
})

Summary

• There is one main process and one renderer per window; heavy work can move to a utility process.
• Use ipcMain.handle with ipcRenderer.invoke for request and response, send with on for one-way messages, and webContents.send from main to renderer.
• Under context isolation, expose a narrow API through contextBridge.
• Follow the security checklist: keep Node.js out of renderers, and apply a CSP, IPC validation, and navigation limits.