How to securely inject global variable into BrowserWindow / BrowserView in Electron?

In Electron, a secure method to inject global variables into BrowserWindow or BrowserView involves using the preload script. The preload script executes before page loading, granting access to Node.js features and global variables while securely exposing necessary variables or functions to the renderer process.

Below are the steps to implement this process:

Step 1: Create a preload.js script

Define global variables required by the renderer process in this script. For instance, if you need to inject a global configuration object into the page, define it within the preload.js file.

javascript
// preload.js
const { contextBridge } = require('electron');

const globalConfig = {
    apiBaseUrl: 'https://api.example.com',
    apiKey: 'secret-key'
};

contextBridge.exposeInMainWorld('globalConfig', globalConfig);

Step 2: Use the preload script in BrowserWindow or BrowserView

When instantiating BrowserWindow or BrowserView, specify the preload.js script via the preload option in webPreferences.

javascript
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    win.loadURL('https://your-website.com');
}

app.whenReady().then(createWindow);

Step 3: Use the injected global variables in the page

Having securely exposed globalConfig as a global variable through contextBridge, you can now directly access it in the page's JavaScript.

javascript
// In the page
console.log(globalConfig.apiBaseUrl); // Output: https://api.example.com

Security Considerations

Utilizing the preload script for variable injection is secure because it enables precise control over resources accessible to the renderer process without fully enabling Node.js integration, thereby minimizing security risks. Always expose only essential variables and methods, and restrict direct access to Node.js APIs as much as possible.

By following these steps, you can effectively and securely inject global variables into Electron's BrowserWindow or BrowserView, enhancing development convenience while maintaining application security.