Arquitetura do Electron: processos principal e de renderização

Electron é uma estrutura que combina o Chromium, para renderização da Web, com o Node.js, para acesso a recursos nativos, permitindo que os desenvolvedores criem aplicativos de desktop multiplataforma usando tecnologias da Web conhecidas. Seu aplicativo React é executado dentro de uma janela do navegador Chromium, enquanto o Node.js fornece acesso aos recursos do sistema operacional.

O processo principal é o ponto de entrada de um aplicativo Electron: ele gerencia o ciclo de vida do aplicativo, cria e controla janelas e lida com interações nativas com o OS. Ele inicia processos de renderização e tem acesso completo às APIs do Node.js e ao sistema operacional subjacente.

Cada BrowserWindow inicia seu próprio processo de renderização, que executa o Chromium e o seu aplicativo React. Há um processo de renderização por janela, e ele se comporta de forma muito semelhante a uma aba comum do navegador: renderiza HTML, folhas de estilo em cascata e JavaScript.

Como o processo principal tem acesso completo ao Node.js, ele pode ler e gravar no sistema de arquivos, criar menus nativos, gerenciar a área de notificação do sistema, iniciar processos filhos e interagir com o hardware. Por padrão, esses recursos não estão disponíveis no processo de renderização por motivos de segurança.

Quando contextIsolation é definido como true, que é o padrão moderno, o processo de renderização fica em uma sandbox e não pode acessar diretamente as APIs do Node.js. Esse modelo de segurança impede que conteúdo malicioso da Web acesse o seu sistema de arquivos ou execute comandos arbitrários do sistema.

A comunicação entre processos (IPC) é o mecanismo que permite que os processos principal e de renderização troquem mensagens. O processo principal usa ipcMain para escutar e responder a mensagens, enquanto o processo de renderização usa ipcRenderer para enviá-las. Toda a comunicação é assíncrona e baseada em mensagens.

O script de pré-carregamento ocupa uma posição intermediária especial: ele é executado no contexto do processo de renderização, mas mantém acesso às APIs do Node.js antes que o conteúdo da página seja carregado. Isso faz dele a ponte segura entre o processo de renderização em sandbox e o processo principal privilegiado.

contextBridge.exposeInMainWorld permite que o script de pré-carregamento exponha seletivamente uma interface segura e cuidadosamente definida ao processo de renderização. O processo de renderização pode chamar essas funções expostas sem jamais obter acesso direto ao Node.js ou aos componentes internos do Electron, mantendo um limite de segurança sólido.

Depois que contextBridge expõe uma interface com um nome como "api", os componentes React podem chamá-la por meio de window.api.myFunction(). Isso se comporta como chamar uma função JavaScript comum, mas, internamente, a chamada passa pelo IPC até o processo principal.

O modelo de segurança do Electron proíbe explicitamente o acesso direto ao Node.js no processo de renderização quando contextIsolation está ativado. Todas as operações privilegiadas devem passar pelo script de pré-carregamento e pelo contextBridge, garantindo que, mesmo se ocorrer um ataque XSS no processo de renderização, ele não consiga acessar o sistema de arquivos.

Uma interação típica funciona assim: o componente React chama window.api.readFile() → o script de pré-carregamento invoca ipcRenderer.invoke() → o processo principal executa fs.readFile() por meio de ipcMain.handle() → o resultado retorna como uma promessa ao processo de renderização. Essa arquitetura mantém o processo de renderização limpo e seguro.

Qual é a finalidade principal de contextBridge.exposeInMainWorld no Electron?

Electron combina Chromium e Node.js: o processo principal gerencia o ciclo de vida do aplicativo e tem acesso completo ao OS, enquanto os processos de renderização executam a interface React em um ambiente isolado. O script de pré-carregamento e o contextBridge formam a ponte segura, e o IPC permite a comunicação segura entre o processo principal privilegiado e o processo de renderização isolado.