contextBridge.exposeInMainWorld safely expose types
contextBridge.exposeInMainWorld can safely expose functions and plain objects. However, you cannot send custom prototypes or symbols over the bridge.
context bridge
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
contextBridge migration from disabled to enabled
When migrating from context isolation disabled to enabled, replace window.X = apiObject patterns with contextBridge.exposeInMainWorld('X', apiObject). The API will be accessible from the website on window.X just like before, but now safely.
contextBridge unsafe direct API exposure
Directly exposing powerful APIs like ipcRenderer.send through contextBridge without argument filtering is unsafe. It allows any website to send arbitrary IPC messages. Instead, provide one method per IPC message with proper filtering and validation.
contextBridge safe IPC pattern
The correct way to expose IPC-based APIs through contextBridge is to provide individual wrapper methods for each IPC message. For example, expose a loadPreferences method that calls ipcRenderer.invoke('load-prefs') rather than exposing ipcRenderer directly.
Context Isolation with TypeScript type safety
When building an Electron app with TypeScript, extend the Window interface in a declaration file to add types for APIs exposed over the context bridge. This ensures the TypeScript compiler knows about properties on the global window object in renderer scripts.
Context isolation prevents direct window attachment
Although preload scripts share a window global with the renderer they're attached to, you cannot directly attach any variables from the preload script to window because of the contextIsolation default. Context Isolation means that preload scripts are isolated from the renderer's main world to avoid leaking any privileged APIs into your web content's code.
contextBridge for safe API exposure
Use the contextBridge module to securely expose APIs from the preload script to the renderer. Example: const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('myAPI', { desktop: true }) Then in renderer: console.log(window.myAPI) => { desktop: true }
contextBridge purposes
contextBridge is useful for two main purposes: (1) By exposing ipcRenderer helpers to the renderer, you can use inter-process communication (IPC) to trigger main process tasks from the renderer (and vice-versa). (2) If you're developing an Electron wrapper for an existing web app hosted on a remote URL, you can add custom properties onto the renderer's window global that can be used for desktop-only logic on the web client's side.
Node.js integration alternative: preload scripts with contextBridge
When disabling Node.js integration, you can still expose APIs to remote content by using preload scripts with the contextBridge API. Preload scripts continue to have access to require and other Node.js features, allowing developers to expose a custom API to remotely loaded content via contextBridge.
Do not expose Electron APIs directly to untrusted web content
Do not directly expose Electron's APIs, especially IPC, to untrusted web content in preload scripts. Exposing raw APIs like ipcRenderer.on is dangerous because it gives renderer processes direct access to the entire IPC event system. Use contextBridge with caution to expose only necessary information and APIs.