Architettura di Electron: processi main e renderer

Electron è un framework che combina Chromium (per il rendering web) con Node.js (per l'accesso alle API native) e consente agli sviluppatori di creare applicazioni desktop multipiattaforma utilizzando tecnologie web familiari. L'app React viene eseguita all'interno di una finestra del browser Chromium, mentre Node.js consente di accedere alle funzionalità del sistema operativo.

Il processo principale è il punto di ingresso di un'applicazione Electron: gestisce il ciclo di vita dell'applicazione, crea e controlla le finestre e gestisce le interazioni con il sistema operativo. Avvia i processi renderer e ha accesso completo alle API Node.js e al sistema operativo sottostante.

Ogni BrowserWindow avvia il proprio processo renderer, che esegue Chromium e la vostra applicazione React. Esiste un processo renderer per ogni finestra e si comporta in modo molto simile a una normale scheda del browser: esegue il rendering di HTML, CSS e JavaScript.

Poiché il processo principale dispone dell'accesso completo a Node.js, può leggere e scrivere nel file system, creare menu nativi, gestire l'area di notifica, avviare processi figli e interagire con l'hardware. Per impostazione predefinita, queste funzionalità non sono disponibili nel renderer per motivi di sicurezza.

Quando contextIsolation è impostato su true, come avviene nelle configurazioni moderne predefinite, il processo renderer è sottoposto a sandbox e non può accedere direttamente alle API Node.js. Questo modello di sicurezza impedisce ai contenuti web dannosi di accedere al file system o di eseguire comandi di sistema arbitrari.

La comunicazione tra processi (IPC) è il meccanismo che consente ai processi principale e renderer di scambiarsi messaggi. Il processo principale utilizza ipcMain per ascoltare i messaggi e rispondere, mentre il renderer utilizza ipcRenderer per inviarli: tutte le comunicazioni sono asincrone e basate su messaggi.

Lo script di preload occupa una posizione intermedia particolare: viene eseguito nel contesto del processo renderer, ma mantiene l'accesso alle API Node.js prima che il contenuto della pagina venga caricato. Questo lo rende il ponte sicuro tra il renderer sottoposto a sandbox e il processo principale privilegiato.

contextBridge.exposeInMainWorld consente allo script di preload di esporre selettivamente al renderer un'API sicura e controllata. Il renderer può chiamare queste funzioni esposte senza ottenere mai accesso diretto a Node.js o agli interni di Electron, mantenendo un solido confine di sicurezza.

Dopo che contextBridge ha esposto un'API con un nome come "api", i componenti React possono chiamarla tramite window.api.myFunction(). Questo funziona proprio come una normale chiamata a una funzione JavaScript, ma dietro le quinte passa attraverso IPC fino al processo principale.

Il modello di sicurezza di Electron vieta esplicitamente l'accesso diretto a Node.js nel renderer quando contextIsolation è abilitato. Tutte le operazioni privilegiate devono passare dallo script di preload e da contextBridge, garantendo che, anche se nel renderer si verifica un attacco XSS, questo non possa accedere al file system.

Un'interazione tipica segue questo flusso: il componente React chiama window.api.readFile() → lo script di preload invoca ipcRenderer.invoke() → il gestore ipcMain.handle() del processo principale esegue fs.readFile() → il risultato viene restituito al renderer come Promise. Questa architettura mantiene il renderer pulito e sicuro.

Qual è lo scopo principale di contextBridge.exposeInMainWorld in Electron?

Electron combina Chromium e Node.js: il processo principale gestisce il ciclo di vita dell'applicazione e dispone dell'accesso completo al sistema operativo, mentre i processi renderer eseguono l'interfaccia React in un ambiente sottoposto a sandbox. Lo script di preload e contextBridge costituiscono il ponte sicuro, mentre IPC consente una comunicazione sicura tra il processo principale privilegiato e il renderer isolato.