Electron-architectuur: main- en rendererprocessen

Electron is een raamwerk dat Chromium (voor webweergave) combineert met Node.js (voor toegang tot systeemeigen API's), zodat ontwikkelaars platformonafhankelijke desktoptoepassingen kunnen bouwen met vertrouwde webtechnologieën. Je React-toepassing draait in een Chromium-browservenster, terwijl Node.js je toegang geeft tot mogelijkheden van het besturingssysteem.

Het hoofdproces is het toegangspunt van een Electron-toepassing — het beheert de levenscyclus van de toepassing, maakt vensters en bestuurt ze, en handelt interacties met het besturingssysteem af. Het start rendererprocessen en heeft volledige toegang tot Node.js-API's en het onderliggende besturingssysteem.

Elke BrowserWindow start een eigen rendererproces, waarin Chromium draait en je React-toepassing wordt uitgevoerd. Er is één rendererproces per venster en het gedraagt zich ongeveer als een gewone browsertab: het geeft HTML, CSS en JavaScript weer.

Omdat het hoofdproces volledige toegang tot Node.js heeft, kan het het bestandssysteem lezen en beschrijven, systeemeigen menu's maken, het systeemvak beheren, onderliggende processen starten en met hardware communiceren. Om veiligheidsredenen zijn deze mogelijkheden standaard niet beschikbaar in het rendererproces.

Wanneer contextIsolation is ingesteld op true (de moderne standaard), is het rendererproces geïsoleerd en heeft het geen directe toegang tot Node.js-API's. Dit beveiligingsmodel voorkomt dat schadelijke webinhoud toegang krijgt tot je bestandssysteem of willekeurige systeemopdrachten uitvoert.

Interprocescommunicatie (IPC) is het mechanisme waarmee het hoofdproces en rendererprocessen berichten kunnen uitwisselen. Het hoofdproces gebruikt ipcMain om naar berichten te luisteren en erop te reageren, terwijl het rendererproces ipcRenderer gebruikt om ze te verzenden — alle communicatie verloopt asynchroon en op basis van berichten.

Het preloadscript neemt een bijzondere tussenpositie in: het draait in de context van het rendererproces, maar behoudt toegang tot Node.js-API's voordat de paginainhoud wordt geladen. Daardoor vormt het de veilige brug tussen het geïsoleerde rendererproces en het bevoorrechte hoofdproces.

Met contextBridge.exposeInMainWorld kan het preloadscript selectief een veilige, zorgvuldig samengestelde API aan het rendererproces beschikbaar stellen. Het rendererproces kan deze blootgestelde functies aanroepen zonder ooit directe toegang te krijgen tot Node.js of interne onderdelen van Electron, waardoor een sterke beveiligingsgrens behouden blijft.

Nadat contextBridge een API beschikbaar heeft gesteld onder een naam zoals "api", kunnen je React-componenten die aanroepen via window.api.myFunction(). Dit voelt net als het aanroepen van een gewone JavaScript-functie, maar achter de schermen loopt de aanroep via IPC naar het hoofdproces.

Het beveiligingsmodel van Electron verbiedt expliciet directe toegang tot Node.js in het rendererproces wanneer contextIsolation is ingeschakeld. Alle bevoorrechte bewerkingen moeten via het preloadscript en contextBridge verlopen, zodat zelfs een XSS-aanval in het rendererproces geen toegang tot het bestandssysteem kan krijgen.

Een typische interactie verloopt als volgt: een React-component roept window.api.readFile() aan → preload roept ipcRenderer.invoke() aan → ipcMain.handle() in het hoofdproces voert fs.readFile() uit → het resultaat keert als een Promise terug naar het rendererproces. Deze architectuur houdt het rendererproces overzichtelijk en veilig.

Electron combineert Chromium en Node.js: het hoofdproces beheert de levenscyclus van de app en heeft volledige toegang tot het besturingssysteem, terwijl rendererprocessen je React-gebruikersinterface in een geïsoleerde omgeving uitvoeren. Het preloadscript en contextBridge vormen de veilige brug, en IPC maakt veilige communicatie mogelijk tussen het bevoorrechte hoofdproces en het geïsoleerde rendererproces.