在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

最好的办法是从环境本身,环境变量或秘密存储中提取您需要的任何秘密.

具体实现取决于您正在使用的无服务器提供程序,但是例如AWS Lambda允许您配置env变量:

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以供使用,同样您也可以.gitignore'config.js'.