Electron Desktop App Development · บทเรียน

รูปแบบ IPC ที่ปลอดภัย

นำแนวทางปฏิบัติที่ดีที่สุดสำหรับ IPC ไปใช้ รวมถึงการตรวจสอบเฟรมของผู้ส่ง การทำความสะอาดข้อมูลนำเข้า และการหลีกเลี่ยงช่องโหว่ด้านความปลอดภัยที่พบบ่อย

รูปแบบ IPC ที่ปลอดภัย เป็นบทเรียน Electron Desktop App Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Electron Desktop App Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why Secure IPC Matters

Electron applications combine the power of web technologies with native desktop capabilities. This means different parts of your app (like the web page and the main process) need to communicate.

This communication is called Inter-Process Communication (IPC). If not handled carefully, IPC can become a major security weakness, allowing attackers to compromise your application or the user's system.

Understanding IPC Security Risks

Insecure IPC patterns can lead to severe vulnerabilities:

Remote Code Execution (RCE): An attacker could execute arbitrary code on the user's machine.
Cross-Site Scripting (XSS): Malicious scripts injected into the renderer could steal data or compromise the app's functionality.
Privilege Escalation: A less-privileged renderer process could gain access to more powerful main process capabilities.

Principle: Least Privilege

The principle of least privilege is a core security concept. It means giving each part of your application only the absolute minimum access and permissions it needs to perform its specific task.

Don't expose more main process functionality than necessary to the renderer.
Limit the types of data that can be sent or requested via IPC.
Keep your IPC channels narrowly focused on specific operations.

Principle: Input Validation

Always validate and sanitize any data received from the renderer process before the main process acts on it. Treat all input from the renderer as potentially malicious.

Check data types, formats, and expected content.
Prevent path traversal attacks (e.g., ../../secret.txt) or SQL/command injection flaws.
Use libraries for sanitization where appropriate.

Insecure IPC Example

This example shows an insecure way for the renderer to request a file. It trusts the renderer's input completely, which is dangerous.

Note: This is for demonstration only. Do NOT use such patterns in a real application!

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs'); // Node.js 'fs' module

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // DANGER: contextIsolation should be true
      // DANGER: nodeIntegration should be false
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  // INSECURE IPC handler - trusts renderer input directly
  ipcMain.on('read-file-insecure', (event, filePath) => {
    // No validation! Renderer could send 'C:/Windows/System32/drivers/etc/hosts'
    fs.readFile(filePath, 'utf8', (err, data) => {
      if (err) {
        console.error('Insecure read error:', err.message);
        event.sender.send('file-data', `Error: ${err.message}`);
        return;
      }
      event.sender.send('file-data', `Content: ${data.substring(0, 100)}...`);
    });
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

Secure IPC with Validation

To secure the previous example, we must validate the filename from the renderer. This code restricts file access to a specific 'data' folder within the app's user data directory.

It checks input type, resolves the path safely, and prevents accessing files outside the allowed directory.

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true // Use context isolation!
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  // SECURE IPC handler - with validation
  ipcMain.on('read-file-secure', (event, filename) => {
    // 1. Validate input type and content
    if (typeof filename !== 'string' || filename.trim() === '' || filename.includes(path.sep)) {
      event.sender.send('file-data', 'Error: Invalid filename provided.');
      return;
    }

    // 2. Define allowed directory (e.g., in app data)
    const allowedDir = path.join(app.getPath('userData'), 'data');
    if (!fs.existsSync(allowedDir)) {
      fs.mkdirSync(allowedDir, { recursive: true });
    }

    // 3. Resolve full path, ensuring it's within allowedDir (path traversal check)
    const fullPath = path.join(allowedDir, filename);
    if (!fullPath.startsWith(allowedDir)) {
      event.sender.send('file-data', 'Error: Access denied. Invalid path.');
      return;
    }

    fs.readFile(fullPath, 'utf8', (err, data) => {
      if (err) {
        console.error('Secure read error:', err.message);
        event.sender.send('file-data', `Error: ${err.message}`);
        return;
      }
      event.sender.send('file-data', `Content: ${data.substring(0, 100)}...`);
    });
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

Context Isolation & Preload Scripts

While covered in more detail in the next lesson, Context Isolation is a fundamental security feature for IPC. It ensures your renderer's JavaScript runs in a separate context, preventing it from directly accessing Node.js APIs or Electron internals.

Use Preload Scripts (run before the renderer's content) to safely expose specific, validated functions to the renderer via the contextBridge module.
This setup prevents malicious scripts (e.g., from an XSS attack) from hijacking your Node.js environment.

Sanitizing Output Data

Just as you validate input, it's good practice to consider sanitizing any data sent from the main process back to the renderer, especially if that data might include user-generated content or come from external sources.

If displaying user-generated content, escape HTML characters to prevent XSS vulnerabilities in the UI.
Ensure that data sent back to the renderer is in an expected and safe format.
This prevents the main process from accidentally introducing vulnerabilities into the UI.

Common IPC Pitfalls

Avoid these common mistakes that can lead to insecure IPC:

Over-exposing the remote module: The remote module (now deprecated) grants the renderer direct access to main process modules. Avoid using it.
Using eval(): Never use eval() with untrusted input, as it can execute arbitrary code.
Disabling security features: Avoid setting nodeIntegration: true or contextIsolation: false in your webPreferences, as these disable critical security protections.

Secure IPC Check

Which of the following is considered a best practice for securing Inter-Process Communication (IPC) in Electron?

Recap: Secure IPC Patterns

You've learned that secure IPC is fundamental for building robust and safe Electron applications:

Apply the principle of least privilege, exposing only necessary functionality.
Always validate and sanitize inputs from the renderer process.
Consider sanitizing outputs before sending data back to the renderer, especially user-generated content.
Avoid common pitfalls like over-exposing the remote module or disabling critical security features like context isolation.

Next, we'll dive deeper into Context Isolation and Preload Scripts, which are essential for implementing these secure patterns effectively.

คำถามที่พบบ่อย

บทเรียน “รูปแบบ IPC ที่ปลอดภัย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปแบบ IPC ที่ปลอดภัย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Electron Desktop App Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Electron Desktop App Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบ IPC ที่ปลอดภัย”

นำแนวทางปฏิบัติที่ดีที่สุดสำหรับ IPC ไปใช้ รวมถึงการตรวจสอบเฟรมของผู้ส่ง การทำความสะอาดข้อมูลนำเข้า และการหลีกเลี่ยงช่องโหว่ด้านความปลอดภัยที่พบบ่อย คุณปฏิบัติ Electron Desktop App Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Electron Desktop App Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Electron Desktop App Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปแบบ IPC ที่ปลอดภัย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Electron Desktop App Development นี้ได้ไหม

ได้ บทเรียน Electron Desktop App Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Electron Desktop App Development