基于 Electron 的应用安全测试基础（第一部分）——Electron 框架简介** 一、引言跨平台桌面应用程序开

本文将开启一系列探讨基于 Electron 应用程序安全测试基础知识的文章。我们的目标是涵盖各个方面，从理解 Electron 框架的基本原理，到讨论案例研究以及从各种参考资料和实际场景中收集到的见解。

通过这些文章，我们的目标是为使用常用方法对 Electron 应用程序进行安全测试提供见解和实用指导。

在本部分中，我们将尝试解释电子的概述、电子的工作原理以及创建简单的基于电子的应用程序所需的简单步骤。

一、引言

跨平台桌面应用程序开发的发展带来了一系列独特的挑战，主要在于确保在 Windows、macOS 和 Linux 等各种操作系统上功能和用户体验的一致性。从技术角度来看，实现这种一致性对于保持应用程序的流畅性和用户满意度至关重要，这当然要求开发人员精通多种技术，并为每个平台维护单独的代码库。

随着时间的推移，出现了一些框架来帮助开发人员克服现有的挑战。其中一个值得注意的解决方案是 Electron 框架，它提供了一个灵活的平台，可以简化跨平台开发流程，并解决不同操作环境固有的复杂性。

近年来，Electron 框架的受欢迎程度显著提升，Notion、Microsoft Teams、Slack 等众多知名应用的采用便是明证。这种广泛的使用间接凸显了 Electron 在简化跨平台开发工作流程和应对各种操作环境挑战方面的卓越效率。

图1 基于 Electron 的应用程序展示 — electronjs.org/apps

1.1. 什么是 Electron

那么，Electron 是什么？简单来说，Electron 是一个专为构建桌面应用而设计的开源框架。它允许开发者利用 JavaScript、HTML 和 CSS 等常见的 Web 技术来创建桌面应用，而无需学习新的编程语言。这意味着，即使已经熟悉 Web 开发的开发者也可以无缝过渡到使用 Electron 构建桌面应用。

1.2. 它是如何工作的？

基本上，Electron 应用程序中的流程始于主进程，该进程由 Node.js 运行时启动，通常基于 package.json 文件中设置的配置启动。此进程负责应用程序的后端操作，例如创建窗口和管理系统级交互。

图2 Electron 应用框架总体流程

随后，主进程会创建渲染进程，每个渲染进程都会运行一个 Chromium 实例。这些进程负责前端，渲染 HTML、CSS 和 JavaScript 等 Web 内容，以显示应用的用户界面。

为了促进主进程和渲染进程之间的通信，我们使用了进程间通信 (IPC)。在此阶段，渲染进程可以请求主进程执行需要原生操作系统集成的操作，但出于安全原因，渲染进程无法直接执行此功能。

注：有关理解和探索 Electron 框架的全面指南，我们可以访问：www.electronjs.org/docs。

现在，在了解了 Electron 框架的总体情况之后，让我们继续构建第一个简单的 hello-world 应用程序的部分。

II. 让我们构建第一个简单的“Hello-World”应用程序

众所周知，为了最佳地进行安全测试，我们必须了解被测试对象的基本原理。因此，在本节中，我们将尝试使用 Electron 创建一个简单的 hello-world 应用程序（它显示一个标题级别大小的简单文本并显示一个简单的警报）。

2.1. 准备我们的环境

2.1.1. 安装 Node.js

第一步，我们需要在即将使用的环境中安装 Node.js。为什么？简单来说，Electron 框架需要 Node.js，它是一个 JavaScript 运行时环境，允许我们在服务器端运行 JavaScript。使用 Node.js，我们可以编写在服务器端运行的 JavaScript 代码，而不仅仅是在浏览器环境中运行。这使我们能够创建能够执行各种任务（例如管理文件、访问数据库和处理 HTTP 请求）的服务器端应用程序。

在 Electron 的环境中，Node.js 用于运行主应用程序进程。这使我们能够访问操作系统功能，从而使开发人员能够使用 Web 技术创建高级桌面应用程序。

图3 Node.js官方门户

要下载 Node.js，我们可以访问官方网站nodejs.org。从那里，我们可以下载适合我们操作系统的安装程序。下载安装程序后，我们可以按照提供的说明在计算机上完成 Node.js 的安装。

为了确保 Node.js 已经安装，我们可以尝试通过终端/命令提示符执行 node 命令：

图4 Node.js已安装

2.1.2. 设置项目目录

与创建任何应用程序一样，在第二步，我们需要为我们的 Electron 项目专门创建一个新目录。

图5 创建项目目录

为此，我们只需为我们的项目创建一个具有所需名称的目录（例如：my-electron-app），然后导航到该目录。

2.1.3. 初始化项目

设置好项目目录后，下一步是使用 package.json 文件初始化项目。该文件基本上充当了我们项目的清单，包含重要的元数据和配置。实际上，我们可以在项目目录中的终端或命令提示符中运行npm init -y命令来生成此文件。

执行此命令后，将自动创建 package.json 文件，并使用大多数参数的默认值，如下所示：

{   “name”：“my-electron-app”，  “version”：“1.0.0”，  “description”：“”，  “main”：“app/main.js”，  “scripts”：{     “test”：“echo \”错误：未指定测试\“&& exit 1”   }，  “keywords”：[]，  “author”：“”，  “license”：“ISC” }

以下是显示的每个参数的一般描述：

name：此参数表示我们的项目或包的名称。它在 npm 注册表中唯一标识我们的项目。在此示例中，项目名称为“my-electron-app”。
version：我们项目或包的版本。它有助于跟踪项目中的更改，并确保可以管理和下载不同的版本。
description：项目或包的简要描述。它可以帮助其他人了解项目的目的和功能。
main：项目的主文件或入口点。它基本上是项目启动时首先执行的 JavaScript 文件。在本例中，我们将主文件设置为“main.js”，并位于 app 目录中。需要注意的是，“app”目录并非强制使用，只是为了更清晰地组织项目结构而提出的建议。实际应用中，我们可以根据自己的喜好使用不同的目录名称。
scripts：可使用 npm 执行的脚本列表。通常用于执行测试、构建或运行应用程序等任务。

但是，对于主入口点通常是名为“main.js”的文件的 Electron 应用程序来说，我们需要调整此值以匹配 Electron 项目的结构。因此，在这种情况下，需要将 scripts 的值更改为：

“脚本”：{ “启动”：“电子。” }，

**通过此调整，我们稍后可以使用npm start 命令运行我们的应用程序 ，它将以 main.js 文件作为其主要入口点启动 Electron 应用程序。

关键词：关键词主要用于对项目或包进行分类，以帮助其他人轻松找到项目。
author：项目作者的姓名或身份。可以是个人姓名，也可以是负责该项目的组织。
license：项目使用的许可证。它规定了其他人如何使用、修改和分发该项目。

总结一下，这些参数的值并不是一成不变的，可以根据我们的开发需求进行调整。

下面是修改后的 package.json 的示例，其中调整了脚本部分：

{   “name”：“my-electron-app”，  “version”：“1.0.0”，  “description”：“”，  “main”：“app/main.js”，  “scripts”：{     “start”：“electron。”   },   “keywords”：[],   “author”：“”，  “license”：“ISC”，  “devDependencies”：{     “electron”：“^29.1.2”   } }

图6 自定义 package.json 文件

2.1.4. 安装 Electron

现在我们已经安装了 Node.js 并创建了项目目录，下一步是安装 Electron。如前所述，Electron 是一个框架，它允许我们使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序。

因此，要安装 Electron，我们可以通过终端使用 npm（Node 包管理器），它与 Node.js 捆绑在一起。从那里，我们有几个安装选项——我们将只关注两个常用的选项，即：

A.全局安装： 如果我们希望 Electron 在系统范围内可用并且可以从任何目录访问，我们可以执行以下命令：

npm install electron -g

此命令基本上会在我们的操作系统上全局安装 Electron，从而允许我们从任何地方访问 Electron CLI（命令行界面）。全局安装确保我们可以创建新的 Electron 项目并运行其他与 Electron 相关的命令，而不受特定项目目录的限制。

B.本地安装： 但是，如果我们想确保 Electron 仅在特定的项目目录中可用，并被视为开发依赖项，我们可以使用以下安装命令：

npm install electron-save-dev

此命令将 Electron 安装为我们项目中的开发依赖项。这意味着 Electron 将包含在项目 package.json 文件的“devDependencies”部分下。这种方法允许在应用程序分发时自动排除 Electron，确保仅在开发需要时安装它。

简而言之，通过将 Electron 作为开发依赖项进行管理，我们可以简化部署过程并确保我们的应用程序可以轻松地分发并在其他机器上运行，而无需单独安装 Electron。

总结一下，两种安装模式的区别如下：

表 1全局安装与本地安装的区别

无论基于现有考虑选择哪种选项，此步骤中重要的是确保其中已安装 Electron。

注意：在此流程中，我们将在安装 Electron 时使用 —save-dev 标志。仔细观察就会发现，以这种方式安装 Electron 会将 devDependencies 参数添加到 package.json 文件中。

图7 使用 —save-dev 标志安装 Electron

2.2. 创建应用程序

2.2.1. 创建主应用程序

配置完必要的设置后，下一步就是为我们的 Electron 项目创建主应用程序文件。此文件作为 Electron 应用程序的入口点，我们在其中定义应用程序的行为和功能。

那么，我们该怎么做呢？首先，我们需要创建一个名为“main.js”的文件，如2.1.3小节所述，并将其放在“app”目录中。

图8 创建“app”目录和 main.js 文件

之后，我们可以使用我们最喜欢的文本编辑器打开 main.js 文件并开始编写简单的代码来创建将加载我们的 index.html 文件的应用程序窗口。

注意：此 main.js 代码通常包括 Electron 的初始化、创建窗口、处理事件和其他应用程序逻辑。

const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow() {   const win = new BrowserWindow({     width: 800,     height: 600,     webPreferences: {       nodeIntegration: true     }   });   win.loadFile(path.join(__dirname, '../index.html')); } app.whenReady().then(createWindow);

图9 创建应用程序窗口

那么，这段代码到底是什么意思呢？

首先，我们从 Electron 导入必要的模块，包括 app 和 BrowserWindow。
接下来，我们尝试定义一个函数 createWindow() 来为我们的 Electron 应用程序创建一个新的浏览器窗口。
在 createWindow() 函数中，我们创建了一个具有指定宽度、高度和 Web 首选项的 BrowserWindow 新实例。
最后，我们将尝试使用 loadFile() 方法将 HTML 文件（例如：index.html）加载到新创建的窗口中。

确保我们还在项目目录中创建了 index.html 文件，因为它在上面的代码中被引用。

好了，创建了 main.js 文件并定义了初始应用逻辑（例如：浏览器窗口和 loadfile），我们就为 Electron 应用搭建好了基础。现在，我们可以根据需要编写其他代码来构建应用的功能了。

2.2.2. 创建并编写 index.html 内容

最后，我们到了构建这个简单的 Hello World 项目的最后一步，即在 index.html 文件中添加内容。这个 HTML 文件将作为我们的 Electron 应用程序的用户界面，定义用户可以看到的内容以及与之交互的内容。

注意：我们还将看看这一步是否强调了 Electron 如何利用 JavaScript 和 HTML 等常见的 Web 技术来创建桌面应用程序，而无需开发人员学习新的编程语言。

为此，只需创建一个名为 index.html 的新文件，并将其放在项目的根目录下（而不是 app 目录下）。在本例中，该目录是“my-electron-app”。

<!DOCTYPE html> <html> <head>   <title>Electron 应用示例</title>   <script>     window.onload = function() {      alert("Hello World");     };   </script> </head> <body>   <h1>欢迎使用我们的第一个 Electron 应用！</h1>   <p>这只是一个示例段落。</p> </body> </html>

图10 index.html 文件的示例内容

图 11 index.html 的位置

在此示例中，我们提供了一个包含标题和段落的基本 HTML 结构。此外，我们还包含一个 JavaScript 函数，用于在文档加载时触发警告消息，从而简单演示了如何使用 JavaScript 与 Electron 环境进行交互。当然，我们可以修改 HTML 文件的内容以适应我们应用程序的特定需求。

一旦我们在“index.html”文件中创建了内容，我们就完成了简单的 Electron Hello World 应用程序的设置。安装了 Node.js、配置了项目目录、初始化了 package.json、安装了 Electron 并创建了主应用程序文件后，我们现在可以执行我们的 Electron 应用程序并查看 Electron 窗口中显示的 Hello World 消息。

2.3. 运行并构建应用程序

2.3.1. 运行 Electron 应用程序

要运行我们的 Electron 应用，我们需要确保仍在项目目录中（在本例中为 my-electron-app）。之后，我们执行以下命令：

npm 启动

此命令将根据 package.json 文件中指定的配置启动 Electron 应用程序。默认情况下， npm start 命令会在 package.json 文件的“scripts”部分中搜索名为“ start ”的脚本（参考我们在 2.1.3 小节中调整的参数）并执行它。

如果上述所有步骤都正确执行，我们现在应该能够看到 Electron 应用程序正在运行，并且应用程序窗口显示 index.html 文件中指定的内容，如下图所示：

图12 我们的 Electron 应用的结果

图13 我们的 Electron App II 的结果

2.3.2. 构建和分发应用程序

经过各种步骤之后，我们中的一些人可能想知道这个应用程序是如何分发的以及如何到达最终用户的。

在分发 Electron 应用时，我们必须确保应用针对不同的操作系统和架构进行正确打包。这当然是为了确保用户无论使用哪种平台，都能轻松地在其设备上安装和运行应用。

例如，在 Windows 中，Electron 应用程序通常打包为可执行安装程序文件（例如 .exe 或 .msi）。对于 Linux 发行版，Electron 应用程序可能根据所使用的包管理器（例如 .deb 或 .rpm 包）以各种格式打包。同时，在 macOS 上，它们通常被打包为 macOS 应用程序包——通常为 .dmg 文件的形式。

请注意，本文将重点介绍如何为 macOS 构建应用程序。不过，此构建过程生成的输出在 Windows 或 Linux 上构建时不会有显著差异。

那么，该怎么做呢？要创建这个 macOS（或任何其他操作系统）应用程序包，我们需要使用 Electron Builder，这是一个用于打包和分发 Electron 应用程序的工具。使用 Electron Builder，我们可以配置应用程序打包过程的各个方面，例如应用程序名称、版本、图标和分发格式。

首先，我们需要在项目中安装 Electron Builder 作为开发依赖项。我们可以通过在终端或命令提示符中运行以下命令来完成此操作：

npm install electron-builder --save-dev

注意：运行命令后，electron-builder 参数将自动出现在 package.json 文件中的“devDependencies”部分下。

图14 安装 Electron Builder

安装完 electron-builder 后，我们需要重新配置 package.json 文件，在“scripts”部分下添加一个“ package-mac ”，并添加一个“ build ”脚本。这个脚本定义了 Electron 应用的构建配置选项。以下是最终的 package.json 文件示例：

{   “name”：“my-electron-app”，  “version”：“1.0.0”，  “description”：“一个简单的 Hello-World 应用程序”，  “main”：“app/main.js”，  “scripts”：{     “start”：“electron。”，    “package-mac”：“electron-builder --mac”   }，  “keywords”：[]，  “author”：“来自 HakTrak 网络安全小组的  Kho”，  “license”：“ISC”，  “devDependencies”：{     “electron”：“^29.1.4”，    “electron-builder”：“^24.13.3”   }，  “build”：{     “appId”：“com.yoko.my-electron-app”，    “productName”：“我的 Electron App”，    “directories”：{       “output”：“dist”     }   } }

图15 修改后的package.json

关于现有参数的补充说明如下：

“ appId ”指定应用程序的唯一标识符。
“ productName ”定义应用程序的显示名称。
“ directories ”部分指定了打包应用程序的输出目录。

配置完 electron-builder 后，我们可以通过运行以下命令来启动打包过程：

npm 运行 package-mac

此命令将根据 package.json 文件中指定的配置，启动 macOS 专属的打包流程。打包完成后，我们将在指定的输出目录（本例中为“dist”）中找到打包后的应用程序文件。

图16 构建应用程序

Electron 应用成功打包后，我们现在有了一个可以分发给用户的可执行文件。用户可以在他们的设备上安装并运行该应用，从而享受它带来的乐趣。

好了，本部分就快结束了。希望读者现在已经对基于 Electron 的应用程序有了大致的了解。在下一部分中，我们将开始探讨如何检测 Electron 应用程序的技术讨论，并概述针对这些 Electron 应用程序执行的常见测试方法。

参考

Electron，“什么是 Electron？”[在线]。访问网址：www.electronjs.org/docs/latest… 年 2 月]。
Electron，“进程间通信”，[在线]。获取方式：www.electronjs.org/docs/latest… 年 2 月]。
Brainhub，“2024年你需要Electron桌面应用的5个理由”，2024年1月11日。[在线]。访问网址：brainhub.eu/library/ele…
Electron，“进程模型”，载于《Electron 中的进程》，[在线]。访问网址：www.electronjs.org/docs/latest… 年 2 月]。
S. Kinney，“Electron 简介”，载于《Electron in Action》，Manning出版社，2018年10月，第一章。[在线]。访问网址：livebook.manning.com/book/electr…
JazzTeam，“Electron——使用 Web 技术构建桌面应用程序”，[在线]。访问网址：jazzteam.org/technical-a… 年 2 月]。
Electron，“构建你的第一个应用”，教程，[在线]。访问网址：www.electronjs.org/docs/latest… 年 2 月]。
S. Kinney，“你的第一个 Electron 应用”，载于《Electron in Action》，Manning 出版社，2018 年 10 月，第二章。[在线]。访问网址：livebook.manning.com/book/electr… 年 2 月]。
A. Garain，“ElectronJS 简介”，GeeksforGeeks，2022 年 7 月 18 日。[在线]。网址：www.geeksforgeeks.org/introductio… 年 3 月]。