Udvikling af desktopapps med Electron · Lektion

Kontekstisolering og preload-scripts

Forstå og anvend kontekstisolering for at beskytte renderer-processen mod ondsindede scripts, og brug preload-scripts til sikker eksponering af API'er.

Lektion 2 af 411 trin

Kontekstisolering og preload-scripts er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Risici ved renderer-processen

I Electron kører din applikations brugergrænseflade i en renderer-proces. Denne proces er i praksis en Chromium-webside, hvilket betyder, at den er sårbar over for almindelige websårbarheder som Cross-Site Scripting (XSS).

Ondsindede scripts, der indsættes i dit webindhold, kan potentielt få adgang til effektfulde Node.js-API'er.
Denne direkte adgang kan føre til, at handlinger på systemniveau udføres uden din viden eller dit samtykke.
Det er afgørende for applikationens sikkerhed at beskytte rendereren.

Hvad er kontekstisolering?

Kontekstisolering er en grundlæggende sikkerhedsfunktion i Electron. Når den er aktiveret, sikrer den, at JavaScript-konteksten for din webside er fuldstændig adskilt fra Electrons interne API'er og Node.js-miljøet.

Det svarer til at have to adskilte JavaScript-verdener i den samme renderer-proces.
Én verden til dit webindhold og en anden til Electron/Node.js.
Denne adskillelse forhindrer scripts på din webside i at få direkte adgang til følsomme API'er.

Godt nyt: Kontekstisolering er aktiveret som standard siden Electron 12!

To JavaScript-verdener

Forestil dig, at din renderer-proces har to usynlige lag:

Websidens kontekst: Her kører din index.html, dens scripts og alle indlæste biblioteker (som React eller Vue). Den fungerer ligesom en almindelig browserfane.
Electron/Node.js-konteksten: Her findes Electrons interne moduler og Node.js-API'er (som fs til adgang til filsystemet).

Kontekstisolering sikrer, at disse to verdener ikke kan interagere direkte med hinandens globale objekter (som window eller document), hvilket forhindrer uautoriseret adgang.

Forbindelse af isolerede kontekster

Selvom isolering er godt for sikkerheden, har din webside nogle gange brug for at interagere med indbyggede computerfunktioner. Det er her, preload-scripts kommer ind i billedet.

Et preload-script kører før din webside indlæses, men i Electron/Node.js-konteksten.
Det har adgang til både Node.js-API'er og websiden's window-objekt (før isoleringen træder fuldt i kraft).
For at eksponere API'er sikkert for den isolerede webside bruger vi imidlertid et særligt værktøj kaldet contextBridge.

Indlæsning af et preload-script

For at bruge et preload-script skal du angive dets sti, når du opretter din BrowserWindow i hovedprocessen. Husk at lade contextIsolation være indstillet til true af hensyn til sikkerheden.

Prøv at køre denne grundlæggende opsætning:

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();
});

Sikker eksponering af API'er

Modulet contextBridge er dit bedste værktøj til sikkert at eksponere funktionalitet fra dit preload-script til rendererens isolerede webkontekst.

Det fungerer som en sikker, envejsbro.
Du definerer, hvilke funktioner eller data du vil eksponere.
contextBridge sikrer, at kun disse definerede API'er er tilgængelige, og at data, der sendes mellem konteksterne, renses korrekt.

Det forhindrer ondsindede scripts på websiden i at ændre dine eksponerede API'er eller få direkte adgang til Node.js.

Oprettelse af dit preload-script

I din preload.js bruger du contextBridge.exposeInMainWorld(). Denne metode tager to argumenter: en nøgle (det navn, API'et får i rendererens window-objekt) og et objekt, der indeholder de funktioner eller værdier, du vil eksponere.

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
});

Adgang til eksponerede API'er

Når dit preload-script har eksponeret et API ved hjælp af contextBridge, kan din websides JavaScript sikkert få adgang til det via window-objektet under den nøgle, du angav.

index.html (eller et script, der indlæses af den):

<!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>

Fuldt eksempel i praksis

Her er den komplette main.js til vores applikation. For at køre dette eksempel skal du oprette tre filer: main.js (nedenfor), preload.js (indholdet fra scene 7) og index.html (indholdet fra scene 8) i den samme mappe.

Når du kører main.js, indlæser den index.html. index.html bruger derefter objektet myAPI, som eksponeres af preload.js, til at vise Electron-versionen og udløse en 'notifikation' (skrevet til konsollen i dette enkle eksempel).

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();
});

Kontrol af konteksten

Det er tid til at teste din forståelse af kontekstisolering og preload-scripts!

Besvar den i den interaktive lektion

Sikkert fundament

Du har lært, hvordan du sikrer renderer-processen i din Electron-applikation!

Kontekstisolering er afgørende for at forhindre direkte adgang mellem webindhold, du ikke har tillid til, og effektfulde Node.js-API'er.
Preload-scripts kører i et isoleret miljø, så du sikkert kan bygge bro over denne adskillelse.
contextBridge er den sikre metode i preload-scripts til at eksponere nøje udvalgte API'er for dit webindhold.

Ved at bruge disse funktioner opbygger du et robust og sikkert fundament for dine Electron-desktopapplikationer. Godt klaret!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 47

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Kontekstisolering og preload-scripts” gratis?

Ja — hele teksten til “Kontekstisolering og preload-scripts” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Kontekstisolering og preload-scripts”?

Forstå og anvend kontekstisolering for at beskytte renderer-processen mod ondsindede scripts, og brug preload-scripts til sikker eksponering af API'er. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?

Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Kontekstisolering og preload-scripts”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?

Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Sikre IPC-mønstre
Kontekstisolering og preload-scripts
Sandboxing af renderer-processen
Beskyttelse mod risici ved eksternt indhold

← Tilbage til Udvikling af desktopapps med Electron