Изоляция контекста

Что это такое?​

Изоляция контекста — это функция, которая гарантирует, что как ваши preload скрипты, так и внутренняя логика Electron работают в отдельном контексте от веб-сайта, который вы загружаете в webContents. Это важно для безопасности, так как помогает предотвратить доступ веб-сайта к внутренней работе Electron или к мощным API, к которым имеет доступ ваш скрипт загрузки.

Это означает, что объект window, к которому имеет доступ ваш скрипт загрузки, на самом деле является другим объектом, чем тот, к которому имел бы доступ веб-сайт. Например, если вы установите window.hello = 'wave' в вашем скрипте загрузки, и изоляция контекста включена, window.hello будет undefined, если веб-сайт попытается получить к нему доступ.

Изоляция контекста включена по умолчанию с Electron 12, и это рекомендуемое значение безопасности для всех приложений.

Миграция​

Без изоляции контекста я предоставлял API из своего скрипта загрузки, используя window.X = apiObject. Теперь что?

Ранее: изоляция контекста отключена​

Предоставление API из вашего скрипта загрузки загруженному веб-сайту в процессе рендеринга — распространённый случай использования. При отключённой изоляции контекста ваш скрипт загрузки делил общий глобальный объект window с процессом рендеринга. Вы могли затем добавлять произвольные свойства к скрипту загрузки:

// preload with contextIsolation disabled
window.myAPI = {
  doAThing: () => {}
}

Функция doAThing() затем могла использоваться напрямую в процессе рендеринга:

// use the exposed API in the renderer
window.myAPI.doAThing()

После: изоляция контекста включена​

В Electron есть специальный модуль, который поможет вам сделать это без проблем. Модуль contextBridge может использоваться для безопасного экспорта API из изолированного контекста вашего скрипта загрузки в контекст, в котором работает веб-сайт. API также будет доступен с веб-сайта в window.myAPI так же, как и раньше.

// preload with contextIsolation enabled
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  doAThing: () => {}
})

// use the exposed API in the renderer
window.myAPI.doAThing()

Пожалуйста, прочитайте документацию contextBridge по ссылке выше, чтобы полностью понять её ограничения. Например, вы не можете отправлять пользовательские прототипы или символы через мост.

Учёт мер безопасности​

Просто включение contextIsolation и использование contextBridge не означает, что всё, что вы делаете, безопасно. Например, этот код небезопасен.

// ❌ Bad code
contextBridge.exposeInMainWorld('myAPI', {
  send: ipcRenderer.send
})

Он напрямую предоставляет доступ к мощному API без какой-либо фильтрации аргументов. Это позволит любому веб-сайту отправлять произвольные сообщения IPC, чего вы не хотите. Правильный способ экспорта API на основе IPC — предоставление одного метода на каждое сообщение IPC.

// ✅ Good code
contextBridge.exposeInMainWorld('myAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})

Использование с TypeScript​

Если вы разрабатываете своё приложение Electron с TypeScript, вам нужно добавить типы к своим API, предоставляемым через мост контекста. У объекта рендеринга window не будет правильных типизаций, если вы не расширите типы с помощью файла объявления.

Например, для этого preload.ts скрипта:

contextBridge.exposeInMainWorld('electronAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})

Вы можете создать renderer.d.ts файл объявления и глобально дополнить интерфейс Window.

export interface IElectronAPI {
  loadPreferences: () => Promise<void>,
}

declare global {
  interface Window {
    electronAPI: IElectronAPI
  }
}

Это гарантирует, что компилятор TypeScript будет знать о свойстве electronAPI в вашем глобальном объекте window при написании скриптов в вашем процессе рендеринга:

window.electronAPI.loadPreferences()