FE - Electron base-优快云博客

本文链接：https://blog.youkuaiyun.com/zhuanghuajun/article/details/139565028

Just some points that I consider should be recorded

开始使用

介绍

Electron是一个用于构建跨平台桌面应用程序的开源框架，它允许开发者使用常见的Web技术，如HTML、CSS和JavaScript来构建应用程序。Electron基于Chromium和Node.js，使开发者可以使用Web技术创建原生应用程序，无需学习新的语言或平台。它被许多知名应用程序使用，如Visual Studio Code、Slack和GitHub Desktop。

快速开始

安装Node.js和npm
确保在您的系统上安装了Node.js和npm。您可以从官方网站（https://nodejs.org/）下载并安装。
创建新项目
使用npm初始化一个新的Electron项目：

mkdir my-electron-app
cd my-electron-app
npm init -y

安装Electron
通过npm安装Electron依赖：

npm install electron --save-dev

创建主文件
在项目根目录下创建一个JavaScript文件，作为Electron应用程序的入口点。命名为main.js：

const {
    app, BrowserWindow } = require('electron')

function createWindow () {
   
  const win = new BrowserWindow({
   
    width: 800,
    height: 600,
    webPreferences: {
   
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

创建HTML文件
在项目根目录下创建一个HTML文件，作为应用程序的界面。命名为index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

运行应用程序
运行您的Electron应用程序：

npm start

上下文隔离

上下文隔离可确保 preload 脚本和 Electron 的内部逻辑与 webContents 中加载的网站在不同的上下文中运行。这对于安全目的很重要，因为它有助于防止网站访问 Electron 内部结构或预加载脚本有权访问的强大 API。

这意味着预加载脚本有权访问的 window 对象与网站有权访问的对象不同。例如，如果你在预加载脚本中设置了 window.hello = ‘wave’ 并启用了上下文隔离，则当网站尝试访问 window.hello 时，window.hello 将是未定义的。

自 Electron 12 起，上下文隔离已默认启用，并且它是所有应用的推荐安全设置。

安全考虑

仅启用 contextIsolation 并使用 contextBridge 并不自动意味着你所做的一切都是安全的。例如，这段代码是不安全的。

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

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

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

使用预加载脚本

// preload.js
const {
    contextBridge, ipcRenderer }