在 JS 设置中隐藏 API 键

Question

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

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

关键信息：

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

Answer 1

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

具体实施将取决于您使用的无服务器提供商，但例如 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/

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

因此，如果我正确理解更新后的问题，您想将所有代码签入 git 除了 API 键，仅在您的本地文件系统上提供文件并让本地副本能够访问 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来使用，同样你可以.git忽略'config.js'。

Answer 2

如果您使用 MVC，请尝试在 php 变量中编写。比在脚本 javasript 中打开 echo ...

在 JS 设置中隐藏 API 键

Hiding API keys in JS setup

javascript

environment-variables

api-key

ecmascript-6