Архитектура Electron: основной процесс и процесс визуализации

Electron — это фреймворк, объединяющий Chromium для отображения веб-содержимого с Node.js для доступа к системным API. Он позволяет разработчикам создавать кроссплатформенные настольные приложения с помощью привычных веб-технологий. Ваше приложение React работает внутри окна браузера Chromium, а Node.js предоставляет доступ к возможностям операционной системы.

Главный процесс — это точка входа приложения Electron: он управляет жизненным циклом приложения, создаёт окна и управляет ими, а также обрабатывает взаимодействие с нативной OS. Он запускает процессы визуализации и получает полный доступ к API Node.js и базовой операционной системе.

Каждый BrowserWindow запускает собственный процесс визуализации, в котором работает Chromium и выполняется ваше приложение React. Для каждого окна существует отдельный процесс визуализации, который во многом ведёт себя как обычная вкладка браузера: отображает HTML, CSS и JavaScript.

Поскольку главный процесс имеет полный доступ к Node.js, он может читать из файловой системы и записывать в неё, создавать нативные меню, управлять областью уведомлений, запускать дочерние процессы и взаимодействовать с оборудованием. По умолчанию эти возможности недоступны в процессе визуализации по соображениям безопасности.

Если для contextIsolation задано значение true (современное значение по умолчанию), процесс визуализации работает в песочнице и не может напрямую обращаться к API Node.js. Эта модель безопасности не позволяет вредоносному веб-содержимому получать доступ к файловой системе или выполнять произвольные системные команды.

Межпроцессное взаимодействие (IPC) — это механизм, позволяющий главному процессу и процессу визуализации обмениваться сообщениями. Главный процесс использует ipcMain для прослушивания сообщений и ответа на них, а процесс визуализации использует ipcRenderer для их отправки. Всё взаимодействие происходит асинхронно и на основе сообщений.

Скрипт предварительной загрузки занимает особое промежуточное положение: он выполняется в контексте процесса визуализации, но сохраняет доступ к API Node.js до загрузки содержимого страницы. Благодаря этому он служит безопасным мостом между изолированным процессом визуализации и привилегированным главным процессом.

contextBridge.exposeInMainWorld позволяет скрипту предварительной загрузки выборочно предоставлять процессу визуализации безопасный, тщательно отобранный API. Процесс визуализации может вызывать эти предоставленные функции, не получая прямого доступа к внутренним механизмам Node.js или Electron, что сохраняет надёжную границу безопасности.

После того как contextBridge предоставил API под именем вроде "api", компоненты React могут обращаться к нему через window.api.myFunction(). Это выглядит как обычный вызов функции JavaScript, но внутри вызов проходит через IPC к главному процессу.

Модель безопасности Electron явно запрещает прямой доступ к Node.js из процесса визуализации, если включён contextIsolation. Все привилегированные операции должны проходить через скрипт предварительной загрузки и contextBridge. Благодаря этому даже при XSS-атаке в процессе визуализации злоумышленник не сможет получить доступ к файловой системе.

Типичное взаимодействие выглядит так: компонент React вызывает window.api.readFile() → скрипт предварительной загрузки вызывает ipcRenderer.invoke() → главный процесс выполняет fs.readFile() через ipcMain.handle() → результат возвращается в процесс визуализации в виде обещания. Такая архитектура сохраняет процесс визуализации чистым и безопасным.

Каково основное назначение contextBridge.exposeInMainWorld в Electron?

Electron объединяет Chromium и Node.js: главный процесс управляет жизненным циклом приложения и имеет полный доступ к OS, а процессы визуализации запускают ваш интерфейс React в изолированной песочнице. Скрипт предварительной загрузки и contextBridge образуют безопасный мост, а IPC обеспечивает безопасное взаимодействие между привилегированным главным процессом и изолированным процессом визуализации.