上下文隔离
它是什么?
上下文隔离是一项功能,它确保您的 preload
脚本和 Electron 的内部逻辑都在与您在 webContents
中加载的网站不同的上下文中运行。这对于安全目的非常重要,因为它有助于防止网站访问 Electron 内部组件或您的预加载脚本有权访问的强大 API。
这意味着您的预加载脚本可以访问的 window
对象实际上与网站可以访问的对象不同。例如,如果您在预加载脚本中设置 window.hello = 'wave'
并且启用了上下文隔离,则如果网站尝试访问 window.hello
,它将是未定义的。
自 Electron 12 起,上下文隔离已默认启用,并且是所有应用程序推荐的安全设置。
迁移
在没有上下文隔离的情况下,我过去常常使用
window.X = apiObject
从预加载脚本提供 API。现在怎么办?
之前:上下文隔离禁用
从预加载脚本向渲染器进程中加载的网站公开 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 消息,这是您不希望发生的。公开基于 IPC 的 API 的正确方法是为每个 IPC 消息提供一个方法。
// ✅ Good code
contextBridge.exposeInMainWorld('myAPI', {
loadPreferences: () => ipcRenderer.invoke('load-prefs')
})
与 TypeScript 一起使用
如果您正在使用 TypeScript 构建您的 Electron 应用程序,您将需要为通过上下文桥公开的 API 添加类型。除非您使用声明文件扩展类型,否则渲染器的 window
对象将没有正确的类型。
例如,给定此 preload.ts
脚本
contextBridge.exposeInMainWorld('electronAPI', {
loadPreferences: () => ipcRenderer.invoke('load-prefs')
})
您可以创建一个 interface.d.ts
声明文件,并全局增强 Window
接口
export interface IElectronAPI {
loadPreferences: () => Promise<void>,
}
declare global {
interface Window {
electronAPI: IElectronAPI
}
}
这样做将确保 TypeScript 编译器在渲染器进程中编写脚本时知道全局 window
对象上的 electronAPI
属性
window.electronAPI.loadPreferences()