Electron Desktop App Development · Lección

Aislamiento de contexto y scripts de precarga

Comprenda y aplique el aislamiento de contexto para proteger el proceso de renderizado frente a scripts maliciosos, y utilice scripts de precarga para exponer API de forma segura.

Aislamiento de contexto y scripts de precarga es una lección gratuita de Electron Desktop App Development en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Electron Desktop App Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Electron Desktop App Development incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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!

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!

Preguntas frecuentes

¿La lección «Aislamiento de contexto y scripts de precarga» es gratis?

Sí — el texto completo de «Aislamiento de contexto y scripts de precarga» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Electron Desktop App Development, actualiza a CoddyKit PRO. El curso de Electron Desktop App Development incluye 4 lecciones en total.

¿Qué aprenderé en «Aislamiento de contexto y scripts de precarga»?

Comprenda y aplique el aislamiento de contexto para proteger el proceso de renderizado frente a scripts maliciosos, y utilice scripts de precarga para exponer API de forma segura. Practicas Electron Desktop App Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Electron Desktop App Development?

No se requiere experiencia previa. Electron Desktop App Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Aislamiento de contexto y scripts de precarga»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Electron Desktop App Development?

Sí. Cada lección de Electron Desktop App Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Patrones seguros de IPC
Aislamiento de contexto y scripts de precarga
Sandboxing del proceso de renderizado
Refuerzo frente a riesgos de contenido remoto

← Volver a Electron Desktop App Development