Architektura Electron: proces główny i proces renderera

Electron to framework łączący Chromium (do renderowania stron internetowych) z Node.js (do dostępu do natywnych API), który umożliwia programistom tworzenie wieloplatformowych aplikacji desktopowych przy użyciu znanych technologii webowych. Aplikacja React działa w oknie przeglądarki Chromium, a Node.js zapewnia dostęp do funkcji systemu operacyjnego.

Proces główny jest punktem wejścia aplikacji Electron — zarządza cyklem życia aplikacji, tworzy i kontroluje okna oraz obsługuje interakcje z natywnym systemem operacyjnym. Uruchamia procesy renderera i ma pełny dostęp do API Node.js oraz bazowego systemu operacyjnego.

Każdy BrowserWindow uruchamia własny proces renderera, który uruchamia Chromium i wykonuje aplikację React. Na każde okno przypada jeden proces renderera, który zachowuje się podobnie do zwykłej karty przeglądarki — renderuje HTML, CSS i JavaScript.

Ponieważ proces główny ma pełny dostęp do Node.js, może odczytywać i zapisywać system plików, tworzyć natywne menu, zarządzać zasobnikiem systemowym, uruchamiać procesy potomne oraz współpracować ze sprzętem. Ze względów bezpieczeństwa możliwości te są domyślnie niedostępne w procesie renderera.

Gdy contextIsolation ma wartość true (co jest obecnie ustawieniem domyślnym), proces renderera działa w sandboxie i nie może bezpośrednio uzyskiwać dostępu do API Node.js. Ten model bezpieczeństwa chroni przed uzyskaniem przez złośliwe treści internetowe dostępu do systemu plików lub możliwością wykonywania dowolnych poleceń systemowych.

Komunikacja międzyprocesowa (IPC) to mechanizm umożliwiający wymianę komunikatów między procesem głównym a procesami rendererów. Proces główny używa ipcMain do nasłuchiwania komunikatów i odpowiadania na nie, natomiast renderer używa ipcRenderer do ich wysyłania — cała komunikacja jest asynchroniczna i oparta na komunikatach.

Skrypt preload zajmuje szczególne miejsce pośrednie: działa w kontekście procesu renderera, ale zachowuje dostęp do API Node.js przed załadowaniem zawartości strony. Dzięki temu stanowi bezpieczny most między izolowanym rendererem a uprzywilejowanym procesem głównym.

contextBridge.exposeInMainWorld umożliwia skryptowi preload selektywne udostępnienie rendererowi bezpiecznego, starannie dobranego API. Renderer może wywoływać te udostępnione funkcje bez uzyskiwania bezpośredniego dostępu do elementów wewnętrznych Node.js ani Electron, co pozwala zachować wyraźną granicę bezpieczeństwa.

Gdy contextBridge udostępni API pod nazwą taką jak "api", komponenty React mogą wywoływać je za pomocą window.api.myFunction(). Przypomina to wywoływanie zwykłej funkcji JavaScript, ale w tle żądanie jest przekazywane przez IPC do procesu głównego.

Model bezpieczeństwa Electron wyraźnie zabrania bezpośredniego dostępu do Node.js w rendererze, gdy włączono contextIsolation. Wszystkie operacje wymagające uprawnień muszą przechodzić przez skrypt preload i contextBridge, dzięki czemu nawet w przypadku ataku XSS w rendererze nie można uzyskać dostępu do systemu plików.

Typowa interakcja przebiega następująco: komponent React wywołuje window.api.readFile() → preload wywołuje ipcRenderer.invoke() → ipcMain.handle() w procesie głównym wykonuje fs.readFile() → wynik wraca jako Promise do renderera. Taka architektura pozwala zachować czysty i bezpieczny renderer.

Jaki jest główny cel contextBridge.exposeInMainWorld w Electron?

Electron łączy Chromium i Node.js: proces główny zarządza cyklem życia aplikacji i ma pełny dostęp do systemu operacyjnego, natomiast procesy rendererów uruchamiają interfejs React w środowisku sandbox. Skrypt preload i contextBridge tworzą bezpieczny most, a IPC umożliwia bezpieczną komunikację między uprzywilejowanym procesem głównym a odizolowanym rendererem.