Electron-Architektur: Main- und Renderer-Prozesse

Electron ist ein Framework, das Chromium (für Web-Rendering) mit Node.js (für den Zugriff auf native APIs) kombiniert und es Entwicklern ermöglicht, plattformübergreifende Desktopanwendungen mit vertrauten Webtechnologien zu erstellen. Ihre React-App läuft in einem Chromium-Browserfenster, während Node.js Ihnen Zugriff auf Betriebssystemfunktionen gibt.

Der Hauptprozess ist der Einstiegspunkt einer Electron-Anwendung – er verwaltet den Lebenszyklus der Anwendung, erstellt und steuert Fenster und verarbeitet Interaktionen mit dem nativen Betriebssystem. Er startet Renderer-Prozesse und hat vollständigen Zugriff auf Node.js-APIs sowie das zugrunde liegende Betriebssystem.

Jedes BrowserWindow erzeugt einen eigenen Renderer-Prozess, in dem Chromium ausgeführt und Ihre React-Anwendung ausgeführt wird. Pro Fenster gibt es einen Renderer-Prozess, der sich ähnlich wie ein gewöhnlicher Browser-Tab verhält – er rendert HTML, CSS und JavaScript.

Da der Hauptprozess vollständigen Zugriff auf Node.js hat, kann er das Dateisystem lesen und schreiben, native Menüs erstellen, die Systemleiste verwalten, Kindprozesse starten und mit Hardware interagieren. Aus Sicherheitsgründen sind diese Funktionen im Renderer standardmäßig nicht verfügbar.

Wenn contextIsolation auf true gesetzt ist (die moderne Standardeinstellung), ist der Renderer-Prozess in einer Sandbox und kann nicht direkt auf Node.js-APIs zugreifen. Dieses Sicherheitsmodell verhindert, dass schädlicher Webinhalt auf Ihr Dateisystem zugreift oder beliebige Systembefehle ausführt.

Inter-Process Communication (IPC) ist der Mechanismus, über den der Hauptprozess und die Renderer-Prozesse Nachrichten austauschen können. Der Hauptprozess verwendet ipcMain, um auf Nachrichten zu warten und darauf zu antworten, während der Renderer ipcRenderer zum Senden verwendet – die gesamte Kommunikation ist asynchron und nachrichtenbasiert.

Das Preload-Skript nimmt eine besondere Zwischenposition ein: Es läuft im Kontext des Renderer-Prozesses, behält aber vor dem Laden des Seiteninhalts den Zugriff auf Node.js-APIs. Dadurch ist es die sichere Brücke zwischen dem isolierten Renderer und dem privilegierten Hauptprozess.

contextBridge.exposeInMainWorld ermöglicht es dem Preload-Skript, dem Renderer gezielt eine sichere, sorgfältig ausgewählte API bereitzustellen. Der Renderer kann diese freigegebenen Funktionen aufrufen, ohne direkten Zugriff auf Node.js oder Electron-Interna zu erhalten, wodurch eine klare Sicherheitsgrenze erhalten bleibt.

Sobald contextBridge eine API unter einem Namen wie "api" freigegeben hat, können Ihre React-Komponenten sie über window.api.myFunction() aufrufen. Das fühlt sich wie der Aufruf einer gewöhnlichen JavaScript-Funktion an, intern wird der Aufruf jedoch über IPC an den Hauptprozess weitergeleitet.

Das Electron-Sicherheitsmodell untersagt den direkten Node.js-Zugriff im Renderer ausdrücklich, wenn contextIsolation aktiviert ist. Alle privilegierten Operationen müssen über das Preload-Skript und contextBridge ausgeführt werden. Dadurch kann selbst ein XSS-Angriff im Renderer nicht auf das Dateisystem zugreifen.

Eine typische Interaktion läuft folgendermaßen ab: Eine React-Komponente ruft window.api.readFile() auf → das Preload-Skript ruft ipcRenderer.invoke() auf → ipcMain.handle() im Hauptprozess führt fs.readFile() aus → das Ergebnis wird als Promise an den Renderer zurückgegeben. Diese Architektur hält den Renderer übersichtlich und sicher.

Was ist der Hauptzweck von contextBridge.exposeInMainWorld in Electron?

Electron kombiniert Chromium und Node.js: Der Hauptprozess verwaltet den Lebenszyklus der Anwendung und hat vollständigen Betriebssystemzugriff, während Renderer-Prozesse Ihre React-Oberfläche in einer Sandbox ausführen. Das Preload-Skript und contextBridge bilden die sichere Brücke, und IPC ermöglicht eine sichere Kommunikation zwischen dem privilegierten Hauptprozess und dem isolierten Renderer.