Electron 预加载脚本 | Quasar 框架

Quasar CLI 与 Webpack - @quasar/app-webpack

Electron 预加载脚本

出于安全原因，渲染线程（来自 /src 的 UI 代码）无法访问 Node.js 内容。但是，您可以通过位于 /src-electron/electron-preload.[js|ts] 的 Electron 预加载脚本运行 Node.js 代码并将其桥接到渲染线程。使用 contextBridge（来自 electron 包）来公开 UI 所需的内容。

由于预加载脚本从 Node.js 运行，因此请谨慎操作，并注意您对渲染线程公开的内容！

使用方法

在 /src-electron/ 文件夹中，有一个名为 electron-preload.js 的文件。用您的预加载代码填充它。

确保您的 /src-electron/electron-main.[js|ts] 包含以下内容（靠近“webPreferences”部分）

// Add this at the top:
import path from 'path'

// ...

function createWindow () {
  // ...
  mainWindow = new BrowserWindow({
    // ...
    webPreferences: {
      // HERE IS THE MAGIC:
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
    }
  })

/src-electron/electron-preload.[js|ts] 内容示例

// example which injects window.myAPI.doAThing() into the renderer
// thread (/src/*)

const { contextBridge } = require('electron')

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

警告

请注意，此文件在 Node.js 上下文中运行。
如果您从 node_modules 导入任何内容，那么请确保该包在 /package.json > “dependencies” 中指定，而不是在“devDependencies”中。

安全注意事项

仅仅使用 contextBridge 并不意味着您所做的一切都是安全的。例如，以下代码不安全

// BAD code; DON'T!!
contextBridge.exposeInMainWorld('myAPI', {
  send: ipcRenderer.send
})

它直接公开了一个强大的 API，没有任何类型的参数过滤。这将允许任何网站发送任意 IPC 消息，而您不希望这种情况发生。公开基于 IPC 的 API 的正确方法是为每个 IPC 消息提供一个方法。

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

现在，loadPreferences 在您的 javascript 代码中全局可用（即：window.myAPI.loadPreferences）。

警告

确保选择不会与现有 Window 键冲突的名称。

使用上面的代码，在主线程中 invoke 到 load-prefs 的代码将如下所示

ipcMain.handle('myAPI:load-prefs', () => {
  return {
    // object that contains preferences
  }
})

预加载脚本的自定义路径

如果您希望更改预加载脚本（甚至主线程文件）的位置，请编辑 /quasar.config 文件

// should you wish to change default files
sourceFiles: {
  electronMain: 'src-electron/electron-main.js',
  electronPreload: 'src-electron/electron-preload.js'
}

发现错误了吗？在浏览器中编辑此页面

1. 介绍

2. 使用方法

3. 安全注意事项

4. 预加载脚本的自定义路径