如何在 Vue CLI 4 和 Electron 项目中保护环境变量中的 API 密钥

Posted 2023-03-17

【中文标题】如何在 Vue CLI 4 和 Electron 项目中保护环境变量中的 API 密钥

【英文标题】：How to secure API Keys in Environment Variables in a Vue CLI 4 and Electron project

【发布时间】：2021-09-14 11:18:49

【问题描述】：

我正在尝试开发一个桌面应用程序，该应用程序需要进行一些私有 API 调用，并使用一些密钥进行身份验证。

密钥是由我所在组织之外的外部 IT 服务提供商为我创建的 - 他们负责安全，因此存在一些限制：

他们表示，即使他们已经采取措施保护 API，并且即使发生违规行为也有适当的缓解策略，但他们仍然希望确保我以安全意识处理密钥心态，并采取一切可能的措施，以确保他们保持安全。 我不能只在私有服务器或无服务器平台上创建随机中间件/网关来代表我的应用执行 API 调用，因为这些调用可能包含业务数据。

我做了一些研究，根据我的发现，一般建议是在项目文件夹中设置一个“.env”文件，并在该文件中使用环境变量来存储 API 密钥。

但在阅读Vue CLI documentation 后，我发现了以下内容：

警告

不要在您的应用中存储任何秘密（例如私有 API 密钥）！

环境变量嵌入到构建中，这意味着任何人都可以 通过检查应用的文件来查看它们。

那么，鉴于这些限制，有没有办法将这些密钥安全地存储在 Vue CLI 4 + Electron 桌面应用项目中？

谢谢。

【参考方案1】：

一般来说，特别是如果你有很多环境变量，最好将环境变量存储在一个点 env 文件（.env）中，但是，当你打包你的电子时，这个文件可能会泄露应用程序。因此，在这种情况下，最好从终端/命令行存储环境变量。为此，请遵循本指南 (https://www.electronjs.org/docs/api/environment-variables)。

请记住，任何需要 API 密钥/私人信息的东西都尽量将其保留在后端，即电子进程并将结果发送到 Vue 前端。

这是一个如何实现的示例：

在来自 CMD 的窗口上：

set SOME_SECRET="a cool secret"

在 POSIX 上：

$ export SOME_SECRET="a cool secret"

主要流程：

// Other electron logic
const  ipcMain  = require("electron");

// Listen for an event sent from the client to do something with the secret
ipcMain.on("doSomethingOnTheBackend", (event, data) => 
    API.post("https://example.com/some/api/endpoint", token: process.env.SOME_SECRET, data);
);

客户端：

const  ipcRenderer  = require("electron");

ipcRenderer.send("doSomethingOnTheBackend", username: "test", password: "some password");

另请注意，要在客户端使用 ipcRenderer nodeIntegration 需要启用。

这里有更多资源可以帮助您入门：

https://www.electronjs.org/docs/api/ipc-renderer

https://www.electronjs.org/docs/api/ipc-main