Electron 上下文隔离

用于确保 预加载脚本 和 Electron 的内部逻辑运行在所加载的 webcontent 页面之外的独立上下文环境中。

这对于安全性很重要。因为它有助于阻止网站访问 Electron 的内部组件和预加载脚本可访问的高等级权限 API。

所以，预加载脚本所访问的 window 对象不是网页能访问的对象。在预加载脚本对 window 对象进行的更改不会应用于页面上。

默认情况下，启用上下文隔离。

通过使用 contextBridge 暴露内容给页面。

// preload.js
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('example', {
  example_handle: () => 'this is one example.'
})

// renderer.js
window.example.example_handle()
// or
example.example_handle()

需要注意的是，任何直接的暴露高级权限 API 是不安全的。

contextBridge.exposeInMainWorld('Api', {
  send: ipcRenderer.send // 这会暴露该 API，允许页面发送任意 IPC 消息
})
// 因此，需要用辅助函数将该方法包裹
contextBridge.exposeInMainWorld('Api', {
  send: () => ipcRenderer.send('example')
})

在 Typescript 中

在预加载脚本中定义的 API 不会包裹在渲染器的 window 中。

因此，需要增加相关类型声明。

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

// renderer.d.ts
export interface IElectronAPI {
  loadPreferences: () => Promise<void>,
}
// 全局增强 window 接口

declare global {
  interface Window {
    electronAPI: IElectronAPI
  }
}