Arsitektur Electron: Proses Utama dan Perender

Electron adalah kerangka kerja yang menggabungkan Chromium (untuk perenderan web) dengan Node.js (untuk akses ke API asli), sehingga pengembang dapat membuat aplikasi desktop lintas platform menggunakan teknologi web yang sudah dikenal. Aplikasi React Anda berjalan di dalam jendela peramban Chromium, sedangkan Node.js memberi Anda akses ke kemampuan sistem operasi.

Proses utama adalah titik masuk aplikasi Electron — proses ini mengelola siklus hidup aplikasi, membuat dan mengendalikan jendela, serta menangani interaksi dengan OS. Proses ini membuat proses perender dan memiliki akses penuh ke API Node.js serta sistem operasi yang mendasarinya.

Setiap BrowserWindow membuat proses perendernya sendiri, yang menjalankan Chromium dan mengeksekusi aplikasi React Anda. Ada satu proses perender untuk setiap jendela, dan perilakunya sangat mirip dengan tab peramban biasa — proses ini merender HTML, CSS, dan JavaScript.

Karena proses utama memiliki akses penuh ke Node.js, proses ini dapat membaca dan menulis sistem berkas, membuat menu asli, mengelola baki sistem, membuat proses anak, dan berinteraksi dengan perangkat keras. Demi alasan keamanan, kemampuan ini secara bawaan tidak tersedia di proses perender.

Ketika contextIsolation disetel ke true (bawaan modern), proses perender disandbox dan tidak dapat mengakses API Node.js secara langsung. Model keamanan ini mencegah konten web berbahaya mengakses sistem berkas Anda atau menjalankan perintah sistem sembarang.

Komunikasi Antarproses (IPC) adalah mekanisme yang memungkinkan proses utama dan proses perender saling bertukar pesan. Proses utama menggunakan ipcMain untuk mendengarkan dan merespons pesan, sedangkan perender menggunakan ipcRenderer untuk mengirimkannya — seluruh komunikasi berlangsung secara asinkron dan berbasis pesan.

Skrip pramuat menempati posisi tengah yang khusus: skrip ini berjalan dalam konteks proses perender, tetapi tetap memiliki akses ke API Node.js sebelum konten halaman dimuat. Dengan demikian, skrip ini menjadi jembatan aman antara proses perender yang disandbox dan proses utama yang memiliki hak istimewa.

contextBridge.exposeInMainWorld memungkinkan skrip pramuat mengekspos API yang aman dan telah dipilih secara selektif kepada proses perender. Proses perender dapat memanggil fungsi yang diekspos tersebut tanpa pernah memperoleh akses langsung ke internal Node.js atau Electron, sehingga batas keamanan tetap kuat.

Setelah contextBridge mengekspos API dengan nama seperti "api", komponen React Anda dapat memanggilnya melalui window.api.myFunction(). Cara ini terasa seperti memanggil fungsi JavaScript biasa, tetapi di balik layar pemanggilan tersebut diteruskan melalui IPC ke proses utama.

Model keamanan Electron secara eksplisit melarang akses langsung ke Node.js dari proses perender ketika contextIsolation diaktifkan. Semua operasi dengan hak istimewa harus melewati skrip pramuat dan contextBridge, sehingga meskipun serangan XSS terjadi di proses perender, serangan tersebut tidak dapat mengakses sistem berkas.

Interaksi yang umum berlangsung seperti ini: komponen React memanggil window.api.readFile() → pramuat memanggil ipcRenderer.invoke() → proses utama menjalankan fs.readFile() melalui ipcMain.handle() → hasil dikembalikan sebagai Promise ke proses perender. Arsitektur ini menjaga proses perender tetap bersih dan aman.

Apa tujuan utama contextBridge.exposeInMainWorld di Electron?

Electron menggabungkan Chromium dan Node.js: proses utama mengelola siklus hidup aplikasi dan memiliki akses penuh ke OS, sedangkan proses perender menjalankan UI React Anda dalam lingkungan yang disandbox. Skrip pramuat dan contextBridge membentuk jembatan yang aman, sementara IPC memungkinkan komunikasi yang aman antara proses utama dengan hak istimewa dan proses perender yang terisolasi.