Preload Scripts & Secure Context Bridge

Preload Scripts & Secure Context Bridge

A preload script runs before the renderer loads any web code, in a privileged yet isolated world.

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

// expose a minimal, typed API
contextBridge.exposeInMainWorld('electronAPI', {
  // async request → returns a Promise
  getVersion: () => ipcRenderer.invoke('app:getVersion'),

  // fire‑and‑forget
  logMessage: (msg) => ipcRenderer.send('log', msg),

  // subscribe to events from main
  onUpdateAvailable: (callback) => ipcRenderer.on('update:available', (e, info) => callback(info))
});

In main.js you must enable the preload path:

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, '../preload/bridge.js'),
    contextIsolation: true,
    nodeIntegration: false
  }
});

Now the renderer can safely call:

document.getElementById('ver').innerText = await window.electronAPI.getVersion();
window.electronAPI.logMessage('App launched');

Never expose the full ipcRenderer object; only expose specific, typed functions.