How the Google Fonts Toggle Works in Draw.io Desktop: Implementation and Persistence Guide

The Google Fonts toggle in Draw.io Desktop persists user preferences using electron-store under the key isGoogleFontsEnabled, dynamically modifies Content-Security-Policy headers to control external font loading, and manages state through secure IPC communication between the renderer and main process.

The jgraph/drawio-desktop repository implements a privacy-centric Google Fonts toggle that allows users to enable or disable external font loading while maintaining persistence across application sessions. This feature demonstrates secure Electron patterns by isolating file system access to the main process and dynamically adjusting security policies based on user consent. The implementation spans the main process logic, preload scripts, and Content-Security-Policy enforcement.

Initializing the Google Fonts Setting from Storage

When the application launches, it immediately retrieves the persisted preference to determine whether Google Fonts should be available during the session.

Reading the Stored Preference

In src/main/electron.js (lines 94-95), the application initializes a module-scoped variable by reading from the electron-store instance:

// Initial load from persistent storage
let isGoogleFontsEnabled = store.get('isGoogleFontsEnabled', false);

The store.get() method accepts a default value of false, ensuring that Google Fonts remain disabled unless the user explicitly opts in. This module-scoped variable serves as the source of truth for the entire main process during the application lifecycle.

IPC Communication Architecture

The toggle mechanism relies on Electron's inter-process communication (IPC) to safely bridge the renderer process (UI) with the main process (file system access).

The Main Process Handler

The core toggle logic resides in src/main/electron.js (lines 1011-1022) within the toggleGoogleFonts function:

function toggleGoogleFonts(e) {
    if (e != null && !validateSender(e.senderFrame)) return null;

    if (store != null) {
        isGoogleFontsEnabled = !isGoogleFontsEnabled;
        store.set('isGoogleFontsEnabled', isGoogleFontsEnabled);
    }
}
ipcMain.on('toggleGoogleFonts', toggleGoogleFonts);

The handler first validates the sender using validateSender(e.senderFrame) to prevent unauthorized IPC calls from compromised renderer contexts. Upon validation, it flips the boolean state and immediately persists the new value to electron-store using store.set('isGoogleFontsEnabled', isGoogleFontsEnabled).

Preload Script Bridge

To expose this functionality securely to the UI, src/main/electron-preload.js uses contextBridge to create a controlled API surface:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    toggleGoogleFonts: () => ipcRenderer.send('toggleGoogleFonts')
});

This pattern prevents the renderer from accessing Node.js or Electron modules directly while allowing controlled communication through the window.electronAPI.toggleGoogleFonts() method.

Content Security Policy Enforcement

The Google Fonts toggle directly impacts the application's security posture by dynamically modifying the Content-Security-Policy (CSP) headers based on the current state.

Dynamic CSP Header Construction

In src/main/electron.js (lines 382-384), the application constructs CSP headers within the onHeadersReceived web request handler:

session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
        responseHeaders: {
            ...details.responseHeaders,
            'Content-Security-Policy': [
                'default-src \'self\'; script-src \'self\' ...' +
                (isGoogleFontsEnabled ? ' https://fonts.googleapis.com https://fonts.gstatic.com' : '') +
                '; img-src * data:; media-src *; font-src * data:; ...'
            ]
        }
    });
});

When isGoogleFontsEnabled evaluates to true, the CSP header explicitly includes https://fonts.googleapis.com and https://fonts.gstatic.com in the allowed origins. When disabled, these external domains are omitted from the policy, effectively blocking all Google Fonts network requests regardless of HTML or CSS content.

Persistence Across Application Sessions

The electron-store module ensures that user preferences survive application restarts without manual configuration file management. Because the setting is written to disk immediately upon toggling via store.set(), the preference is available on next launch when store.get('isGoogleFontsEnabled', false) executes during initialization. This creates a seamless experience where the user's privacy and font preferences are automatically restored without additional interaction.

Summary

• Storage Key: The preference is stored as isGoogleFontsEnabled in electron-store, defaulting to false for privacy protection.
• Security Validation: The toggleGoogleFonts handler in src/main/electron.js validates the sender frame before processing state changes.
• CSP Integration: The toggle dynamically includes or excludes fonts.googleapis.com and fonts.gstatic.com from Content-Security-Policy headers.
• Secure API: The preload script exposes the toggle functionality via contextBridge, preventing direct Node.js access from the renderer.
• Immediate Persistence: Changes are written to disk instantly using store.set(), ensuring state survives crashes and restarts.

Frequently Asked Questions

Where is the Google Fonts preference stored in Draw.io Desktop?

The preference is stored in the application's electron-store instance under the key isGoogleFontsEnabled. This JSON-based store persists the boolean value to the user's local file system, making it available across application restarts without requiring manual configuration file editing.

Which source files handle the Google Fonts toggle functionality?

The implementation spans two primary files: src/main/electron.js contains the IPC handler, persistence logic, and CSP construction (lines 94-95, 382-384, and 1011-1022), while src/main/electron-preload.js exposes the secure API bridge to the renderer process using contextBridge.

How does the toggle affect application security?

When disabled, the application omits Google Fonts domains from the Content-Security-Policy headers, preventing the renderer from loading external font resources regardless of diagram content. When enabled, the CSP headers explicitly allow fonts.googleapis.com and fonts.gstatic.com, permitting external font fetching while maintaining other security restrictions.

What happens if the Google Fonts setting is toggled while diagrams are open?

The change takes effect immediately for all subsequent network requests. The isGoogleFontsEnabled variable is updated in the main process, and the CSP headers are dynamically constructed for every web request, meaning newly loaded fonts will respect the updated setting without requiring an application restart.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}