Electron Desktop App Development · Ders

Bağlam Yalıtımı ve Ön Yükleme Betikleri

İşleyici sürecinizi kötü amaçlı betiklerden korumak için bağlam yalıtımını anlamak ve uygulamak, güvenli API sunumu için ön yükleme betiklerini kullanmak.

2. ders / 411 adım

Bağlam Yalıtımı ve Ön Yükleme Betikleri, CoddyKit'te ücretsiz bir Electron Desktop App Development dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Electron Desktop App Development öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Electron Desktop App Development kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Renderer Process Risks

In Electron, your application's user interface runs in a renderer process. This process is essentially a Chromium web page, meaning it's susceptible to common web vulnerabilities like Cross-Site Scripting (XSS).

Malicious scripts injected into your web content could potentially gain access to powerful Node.js APIs.
This direct access could lead to system-level operations being performed without your knowledge or consent.
Protecting the renderer is crucial for app security.

What is Context Isolation?

Context Isolation is a fundamental security feature in Electron. When enabled, it ensures that the JavaScript context of your web page is completely separate from Electron's internal APIs and Node.js environment.

It's like having two distinct JavaScript worlds within the same renderer process.
One world for your web content, and another for Electron/Node.js.
This separation prevents your web page's scripts from directly accessing sensitive APIs.

Good news: Context Isolation is enabled by default since Electron 12!

Two JavaScript Worlds

Imagine your renderer process has two invisible layers:

The Web Page Context: This is where your index.html, its scripts, and any loaded libraries (like React or Vue) run. It behaves just like a regular browser tab.
The Electron/Node.js Context: This is where Electron's internal modules and Node.js APIs (like fs for file system access) live.

Context Isolation ensures these two worlds cannot directly interact with each other's global objects (like window or document), preventing unauthorized access.

Bridging Isolated Contexts

While isolation is great for security, sometimes your web page needs to interact with native desktop features. This is where preload scripts come in.

A preload script runs before your web page loads, but within the Electron/Node.js context.
It has access to both Node.js APIs and the web page's window object (before isolation takes full effect).
However, to securely expose APIs to the isolated web page, we use a special tool called contextBridge.

Loading a Preload Script

To use a preload script, you must specify its path when creating your BrowserWindow in the main process. Remember to keep contextIsolation set to true for security.

Try running this basic setup:

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true // Crucial for security!
    }
  });

  mainWindow.loadFile('index.html');
}

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

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

Secure API Exposure

The contextBridge module is your best friend for securely exposing functionality from your preload script to the renderer's isolated web context.

It acts as a secure, one-way bridge.
You define what functions or data you want to expose.
contextBridge ensures that only these defined APIs are available and that data passed between contexts is properly sanitized.

This prevents malicious scripts in the web page from tampering with your exposed APIs or gaining direct access to Node.js.

Crafting Your Preload Script

Inside your preload.js, you'll use contextBridge.exposeInMainWorld(). This method takes two arguments: a key (how the API will be named in the renderer's window object) and an object containing the functions or values you want to expose.

preload.js:

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('myAPI', {
  // Expose a simple function
  sendNotification: (message) => {
    // In a real app, you'd use ipcRenderer.send to talk to main process
    console.log(`Preload script sending notification: ${message}`);
    // Example: new Notification('Title', { body: message });
  },
  // Expose a value
  version: process.versions.electron
});

Accessing Exposed APIs

Once your preload script has exposed an API using contextBridge, your web page's JavaScript can safely access it via the window object, under the key you specified.

index.html (or a script loaded by it):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>Electron Version: <span id="electron-version"></span></p>
    <button id="notify-btn">Send Notification</button>

    <script>
      // Access the exposed API
      window.addEventListener('DOMContentLoaded', () => {
        document.getElementById('electron-version').innerText = window.myAPI.version;

        document.getElementById('notify-btn').addEventListener('click', () => {
          window.myAPI.sendNotification('Hello from the renderer!');
        });
      });
    </script>
  </body>
</html>

Full Example in Action

Here's the complete main.js for our app. To run this example, create three files: main.js (below), preload.js (content from Scene 7), and index.html (content from Scene 8) in the same directory.

When you run main.js, it will load index.html. The index.html then uses the myAPI object exposed by preload.js to display the Electron version and trigger a 'notification' (logged to console in this simple example).

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true // Keep this true!
    }
  });

  mainWindow.loadFile('index.html');
  // Open DevTools to see console logs from preload and renderer
  mainWindow.webContents.openDevTools();
}

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

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

Context Check

Time to test your understanding of context isolation and preload scripts!

İnteraktif derste cevapla

Secure Foundations

You've learned how to secure your Electron application's renderer process!

Context Isolation is key to preventing direct access between untrusted web content and powerful Node.js APIs.
Preload scripts run in an isolated environment, allowing you to bridge this gap safely.
contextBridge is the secure method within preload scripts to expose carefully selected APIs to your web content.

By using these features, you build a robust and secure foundation for your Electron desktop applications. Great job!

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 12
Dersler: 47

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Bağlam Yalıtımı ve Ön Yükleme Betikleri” dersi ücretsiz mi?

Evet — “Bağlam Yalıtımı ve Ön Yükleme Betikleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Electron Desktop App Development kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Electron Desktop App Development kursu toplamda 4 dersten oluşur.

“Bağlam Yalıtımı ve Ön Yükleme Betikleri” dersinde ne öğreneceğim?

İşleyici sürecinizi kötü amaçlı betiklerden korumak için bağlam yalıtımını anlamak ve uygulamak, güvenli API sunumu için ön yükleme betiklerini kullanmak. Electron Desktop App Development ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Electron Desktop App Development öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Electron Desktop App Development, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Bağlam Yalıtımı ve Ön Yükleme Betikleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Electron Desktop App Development dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Electron Desktop App Development dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Güvenli IPC Kalıpları
Bağlam Yalıtımı ve Ön Yükleme Betikleri
İşleyici Sürecini Korumalı Alana Alma
Uzak İçerik Risklerine Karşı Güçlendirme

← Electron Desktop App Development Sayfasına Dön