在JS设置中隐藏API密钥 [英] Hiding API keys in JS setup

问题描述

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

I'm creating a simple UI with an HTML+CSS+JS setup that uses a third-party API requiring a key and I'd like to keep the key in a file that I can gitignore and access from my Javascript file. I'm not going to be deploying this project, I just want to be able to push it to GitHub without temporarily deleting the variable before every commit.

所有回复我'我发现与Node.js，React / Webpack或其他服务器设置的设置有关，但我没有服务器或转换器，并且不想为此添加一堆伪装和配置。有没有办法做到这一点？我尝试将其存储在一个单独的JS文件中并导入/导出，但要么我无法正确获取语法，要么我尝试了需要一个转换器。每次尝试变化都会导致语法错误或未定义的变量。

All responses I've found are related to setups with Node.js, React/Webpack, or other server setups, but I don't have a server or transpiler and don't want to add a bunch of cruft and configurations just for this. Is there a way to do that? I tried storing it in a separate JS file and import/export, but either I couldn't get the syntax right or what I was trying needed a transpiler. Every attempt variation resulted in a syntax error or undefined variable.

关键信息：

1. 这是项目完全本地运行 - 例如，在我的浏览器中打开 index.html - 所以我认为我不需要担心客户端中暴露的密钥。


2. 我的设置几乎只包括 index.html ， main.js ，和 style.css 。


3. 我想将项目推送到GitHub，所以我想将api密钥作为变量存储在与 main.js 我可以添加到 .gitignore 但访问 main.js 。


4. 我在没有框架等的情况下尽可能地保持这个简单。除非它非常简单和轻量级，否则我不想添加库来实现这一点。

1. This is project run entirely locally--as in, just opening index.html in my browser--so I don't think I need to worry about the key being exposed in the client.
2. My setup pretty much just includes index.html, main.js, and style.css.
3. I want to push the project to GitHub, so I want to store the api key as a variable in a file separate from main.js that I can add to .gitignore but access in main.js.
4. I'm keeping this as simple as possible without frameworks, etc. Unless it's super simple and lightweight, I don't want to add libraries just to get this working.

推荐答案

最好的办法是从环境中提取您需要的任何秘密，无论是您的环境变量还是秘密商店。

Your best bet is to pull whatever secrets you need from the environment itself, either your environment variables or a secrets store.

具体实现取决于您使用的无服务器提供商，但例如AWS Lambda允许您配置env vars：

The specific implementation will depend on what serverless provider you're using, but for example AWS Lambda lets you configure env vars:

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

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

and you can use the Key Management Service or Parameter Store depending on your preference and requirements:

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

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

Leaving the above in place in case folks find this via looking at the Serverless tag. Updates below based on the updated question.

因此，如果我正确理解更新后的问题，您需要将所有代码签入git，但API密钥除外，请提供仅在本地文件系统上的文件，并使该本地副本能够访问API密钥。

So, if I understand the updated question correctly, you want to check in all your code to git except the API key, serve the files only on your local file system and have that local copy be able to access the API key.

最简单的方法是使用另一个.js文件它定义了有问题的变量，如下所示：

The simplest way to do this would be to just have another .js file that defines the variable(s) in question like so:

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

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

Then, in index.html have another script tag that calls that before any scripts that need the config, e.g.:

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

在main.js中，您将能够引用变量 config 供使用，类似地你可以.gitignore'config.js'。

In main.js you will then be able to reference the variable config for use, and similarly you can .gitignore 'config.js'.

这篇关于在JS设置中隐藏API密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！