上下文隔离

上下文隔离是什么？​

上下文隔离功能将确保您的预加载脚本 和 Electron的内部逻辑 运行在所加载的 webContent 网页之外的另一个独立的上下文环境里。 这对安全性很重要，因为它有助于阻止网站访问 Electron 的内部组件 和 您的预加载脚本可访问的高等级权限的API 。

这意味着，实际上，您的预加载脚本访问的 window 对象并不是网站所能访问的对象。 例如，如果您在预加载脚本中设置 window.hello = 'wave' 并且启用了上下文隔离，当网站尝试访问window.hello对象时将返回 undefined。

 上下文隔离禁用

在渲染进程中，预加载脚本暴露给已加载的页面 API 是一个常见的使用方式。 当上下文隔离时，您的预加载脚本可能会暴露一个常见的全局 window 对象给渲染进程。 此后，您可以从中添加任意的属性到预加载在脚本。

preload.js

// 上下文隔离禁用的情况下使用预加载
window.myAPI = {
  doAThing: () => {}
}

doAThing 函数可以在渲染进程中直接使用

renderer.js

// 在渲染器进程使用导出的 API
window.myAPI.doAThing()

启用上下文隔离

Electron 提供一种专门的模块来无阻地帮助您完成这项工作。contextBridge 模块可以用来安全地从独立运行、上下文隔离的预加载脚本中暴露 API 给正在运行的渲染进程。 API 还可以像以前一样，从 window.myAPI 网站上访问。

preload.js

// 在上下文隔离启用的情况下使用预加载
const { contextBridge } = require('electron')

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

renderer.js

// 在渲染器进程使用导出的 API
window.myAPI.doAThing()

安全事项​

单单开启和使用 contextIsolation 不直接意味着您所做的一切都是安全的。 例如，此代码是 不安全的。

preload.js

// ❌ 错误使用
contextBridge.exposeInMainWorld('myAPI', {
  send: ipcRenderer.send
})

它直接暴露了一个没有任何参数过滤的高等级权限 API 。 这将允许任何网站发送任意的 IPC 消息，这不会是你希望发生的。 相反，暴露进程间通信相关 API 的正确方法是为每一种通信消息提供一种实现方法。

preload.js

// ✅ 正确使用
contextBridge.exposeInMainWorld('myAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})