สถาปัตยกรรมอิเล็กตรอน: กระบวนการหลักและกระบวนการแสดงผล

Electron คือเฟรมเวิร์กที่รวม Chromium (สำหรับแสดงผลเว็บ) เข้ากับ Node.js (สำหรับเข้าถึง API ดั้งเดิมของระบบ) ทำให้นักพัฒนาสามารถสร้างแอปพลิเคชันเดสก์ท็อปข้ามแพลตฟอร์มโดยใช้เทคโนโลยีเว็บที่คุ้นเคย แอป React ของคุณทำงานอยู่ภายในหน้าต่างเบราว์เซอร์ Chromium ขณะที่ Node.js ช่วยให้เข้าถึงความสามารถของระบบปฏิบัติการได้

กระบวนการหลักคือจุดเริ่มต้นของแอปพลิเคชัน Electron ซึ่งจัดการวงจรการทำงานของแอปพลิเคชัน สร้างและควบคุมหน้าต่าง และจัดการการโต้ตอบกับระบบปฏิบัติการดั้งเดิม กระบวนการนี้สร้างกระบวนการเรนเดอร์ขึ้นมา และมีสิทธิ์เข้าถึง API ของ Node.js รวมถึงระบบปฏิบัติการพื้นฐานได้อย่างเต็มที่

BrowserWindow แต่ละรายการจะสร้างกระบวนการเรนเดอร์ของตนเอง ซึ่งเรียกใช้ Chromium และทำงานกับแอปพลิเคชัน React ของคุณ โดยมีหนึ่งกระบวนการเรนเดอร์ต่อหนึ่งหน้าต่าง และทำงานคล้ายแท็บเบราว์เซอร์ทั่วไปมาก นั่นคือใช้แสดงผล HTML, CSS และ JavaScript

เนื่องจากกระบวนการหลักมีสิทธิ์เข้าถึง Node.js อย่างเต็มที่ จึงสามารถอ่านและเขียนระบบไฟล์ สร้างเมนูดั้งเดิมของระบบ จัดการถาดระบบ สร้างกระบวนการลูก และโต้ตอบกับฮาร์ดแวร์ได้ ความสามารถเหล่านี้จะไม่พร้อมใช้งานในกระบวนการเรนเดอร์เป็นค่าเริ่มต้นด้วยเหตุผลด้านความปลอดภัย

เมื่อกำหนดให้ contextIsolation เป็น true (ค่าเริ่มต้นสมัยใหม่) กระบวนการเรนเดอร์จะอยู่ในแซนด์บ็อกซ์และไม่สามารถเข้าถึง API ของ Node.js ได้โดยตรง รูปแบบการรักษาความปลอดภัยนี้ป้องกันไม่ให้เนื้อหาเว็บที่เป็นอันตรายเข้าถึงระบบไฟล์หรือเรียกใช้คำสั่งระบบใด ๆ ได้ตามอำเภอใจ

การสื่อสารระหว่างกระบวนการ (IPC) คือกลไกที่ทำให้กระบวนการหลักและกระบวนการเรนเดอร์แลกเปลี่ยนข้อความกันได้ กระบวนการหลักใช้ ipcMain เพื่อรับฟังและตอบสนองต่อข้อความ ขณะที่กระบวนการเรนเดอร์ใช้ ipcRenderer เพื่อส่งข้อความ การสื่อสารทั้งหมดเป็นแบบไม่พร้อมกันและใช้ข้อความเป็นพื้นฐาน

สคริปต์ preload อยู่ในตำแหน่งกึ่งกลางพิเศษ โดยทำงานในบริบทของกระบวนการเรนเดอร์ แต่ยังคงเข้าถึง API ของ Node.js ได้ก่อนที่เนื้อหาของหน้าจะโหลดเสร็จ จึงทำหน้าที่เป็นสะพานที่ปลอดภัยระหว่างกระบวนการเรนเดอร์ในแซนด์บ็อกซ์กับกระบวนการหลักที่มีสิทธิ์สูง

contextBridge.exposeInMainWorld ช่วยให้สคริปต์ preload เปิดเผย API ที่ปลอดภัยและคัดสรรแล้วให้กระบวนการเรนเดอร์ได้เฉพาะส่วนที่ต้องการ กระบวนการเรนเดอร์สามารถเรียกใช้ฟังก์ชันที่เปิดเผยเหล่านี้ได้โดยไม่ต้องเข้าถึง Node.js หรือส่วนภายในของ Electron โดยตรง จึงยังคงมีขอบเขตการรักษาความปลอดภัยที่เข้มงวด

เมื่อ contextBridge เปิดเผย API ภายใต้ชื่ออย่าง "api" แล้ว คอมโพเนนต์ React ของคุณจะเรียกใช้ผ่าน window.api.myFunction() ได้ ลักษณะการใช้งานเหมือนการเรียกฟังก์ชัน JavaScript ทั่วไป แต่เบื้องหลังคำสั่งจะถูกส่งผ่าน IPC ไปยังกระบวนการหลัก

รูปแบบการรักษาความปลอดภัยของ Electron ห้ามไม่ให้กระบวนการเรนเดอร์เข้าถึง Node.js โดยตรงเมื่อเปิดใช้ contextIsolation การดำเนินการที่ต้องใช้สิทธิ์ทั้งหมดต้องผ่านสคริปต์ preload และ contextBridge เพื่อให้มั่นใจว่าแม้จะเกิดการโจมตี XSS ในกระบวนการเรนเดอร์ ก็จะไม่สามารถเข้าถึงระบบไฟล์ได้

การโต้ตอบโดยทั่วไปมีลำดับดังนี้: คอมโพเนนต์ React เรียก window.api.readFile() → preload เรียกใช้ ipcRenderer.invoke() → กระบวนการหลักดำเนินการ ipcMain.handle() ซึ่งเรียก fs.readFile() → ผลลัพธ์กลับไปยังกระบวนการเรนเดอร์ในรูปพรอมิส สถาปัตยกรรมนี้ช่วยให้กระบวนการเรนเดอร์สะอาดและปลอดภัย

Electron รวม Chromium และ Node.js เข้าด้วยกัน โดยกระบวนการหลักจัดการวงจรการทำงานของแอปและมีสิทธิ์เข้าถึงระบบปฏิบัติการอย่างเต็มที่ ขณะที่กระบวนการเรนเดอร์เรียกใช้ส่วนติดต่อผู้ใช้ React ในสภาพแวดล้อมแซนด์บ็อกซ์ สคริปต์ preload และ contextBridge ทำหน้าที่เป็นสะพานที่ปลอดภัย ส่วน IPC ช่วยให้กระบวนการหลักที่มีสิทธิ์สูงสื่อสารกับกระบวนการเรนเดอร์ที่แยกออกมาได้อย่างปลอดภัย