在 JS 设置中隐藏 API 密钥

Question

我正在使用 HTML+CSS+JS 设置创建一个简单的 UI，该设置使用需要密钥的第三方 API，我想将密钥保存在一个文件中，我可以 gitignore 并从我的Javascript 文件。我不打算部署这个项目，我只是希望能够将它推送到 GitHub，而不会在每次提交之前临时删除变量。

我发现的所有响应都与 Node.js、React/Webpack 或其他服务器设置有关，但我没有服务器或转译器，也不想添加一堆杂乱无章和配置就为了这个。有没有办法做到这一点？我尝试将它存储在一个单独的 JS 文件中并导入/导出，但要么我无法获得正确的语法，要么我正在尝试的东西需要一个转译器。每次尝试变化都会导致语法错误或未定义的变量。

关键信息：

1. 这是一个完全在本地运行的项目——就像在我的浏览器中打开index.html一样——所以我认为我不需要担心密钥会暴露在客户端中。
2. 我的设置几乎只包括index.html、main.js 和style.css。
3. 我想将项目推送到 GitHub，因此我想将 api 密钥作为变量存储在与main.js 分开的文件中，我可以将其添加到.gitignore，但可以在main.js 中访问。
4. 我在没有框架等的情况下尽可能保持简单。除非它超级简单和轻量级，否则我不想添加库只是为了让它工作。

Answer 1

如果你使用MVC，尝试用php variabel 编写。比使用 echo 在脚本 javasript 中打开...

Answer 2

您最好的选择是从环境本身中提取您需要的任何秘密，无论是您的环境变量还是秘密存储。

具体实施取决于您使用的无服务器提供商，但例如 AWS Lambda 允许您配置环境变量：

https://docs.aws.amazon.com/lambda/latest/dg/env_variables.html

您可以根据自己的偏好和要求使用密钥管理服务或参数存储：

https://aws.amazon.com/blogs/mt/the-right-way-to-store-secrets-using-parameter-store/

---

保留上述内容，以防人们通过查看无服务器标签找到此内容。下面根据更新后的问题进行更新。

所以，如果我正确理解更新后的问题，您希望将除 API 密钥之外的所有代码签入 git，仅在本地文件系统上提供文件，并让该本地副本能够访问 API 密钥。

最简单的方法是使用另一个 .js 文件来定义相关变量，如下所示：

// config.js
var config = { // this should be const instead if you're using ES6 standards
  apiKey : '123456789XYZ'
}

然后，在 index.html 中有另一个脚本标签，在任何需要配置的脚本之前调用它，例如：

  <script src='./config.js'></script>
  <script src='./main.js'></script>
</body>

在 main.js 中，您将能够引用变量 config 以供使用，同样您可以使用 .gitignore 'config.js'。