Question

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

我找到的所有响应都与Node.js，React / Webpack或其他服务器设置有关，但我没有服务器或编译器，也不想添加很多问题和配置只是为了这个。有没有办法做到这一点？我尝试将其存储在单独的JS文件中并进行导入/导出，但是我无法正确使用语法，或者我尝试使用的是编译器。每次尝试变化都会导致语法错误或未定义的变量。

关键信息：

这是一个完全在本地运行的项目，就像在浏览器中打开index.html一样，所以我认为我不必担心密钥会在客户端中公开。
我的设置几乎只包括index.html，main.js和style.css。
我想将项目推送到GitHub，所以我想将api键作为变量存储在与main.js分开的文件中，可以将其添加到.gitignore但可以在{{1}中访问}。
在没有框架等的情况下，我会尽量简化这一过程。除非它非常简单和轻巧，否则我不想添加库只是为了使它正常工作。

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/

将以上内容保留在原位，以防人们通过查看Serverless标记而发现。以下根据更新的问题进行更新。

因此，如果我正确理解了更新的问题，则希望将除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'。

Answer 2

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

在JS设置中隐藏API密钥

2 个答案: