javascript 在 JS 设置中隐藏 API 密钥
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51601903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding API keys in JS setup
提问by AnnieP
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 gitignoreand 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.
我正在使用 HTML+CSS+JS 设置创建一个简单的 UI，该设置使用需要密钥的第三方 API，我想将密钥保存在一个文件中，我可以gitignore从我的 Javascript 文件访问该文件。我不打算部署这个项目，我只是希望能够将它推送到 GitHub，而不必在每次提交之前临时删除变量。
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.
我发现的所有响应都与 Node.js、React/Webpack 或其他服务器设置有关，但我没有服务器或转译器，也不想为此添加一堆 cruft 和配置. 有没有办法做到这一点？我尝试将它存储在一个单独的 JS 文件中并导入/导出，但要么我无法获得正确的语法，要么我尝试的东西需要一个转译器。每次尝试变化都会导致语法错误或未定义的变量。
Key information:
关键信息：
- This is project run entirely locally--as in, just opening
index.htmlin my browser--so I don't think I need to worry about the key being exposed in the client. - My setup pretty much just includes
index.html,main.js, andstyle.css. - 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.jsthat I can add to.gitignorebut access inmain.js. - 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.
- 这是完全在本地运行的项目——就像在
index.html我的浏览器中打开一样——所以我认为我不需要担心在客户端公开密钥。 - 我的设置非常简单，只是包括
index.html，main.js，和style.css。 - 我想将项目推送到 GitHub，所以我想将 api 密钥作为变量存储在一个文件中，与
main.js我可以添加.gitignore但在main.js. - 我在没有框架等的情况下尽可能保持简单。除非它非常简单和轻量级，否则我不想添加库只是为了让它工作。
回答by Paul
Your best bet is to pull whatever secrets you need from the environment itself, either your environment variables or a secrets store.
最好的办法是从环境本身中提取您需要的任何秘密，无论是环境变量还是秘密存储。
The specific implementation will depend on what serverless provider you're using, but for example AWS Lambda lets you configure env vars:
具体实现将取决于您使用的无服务器提供商，但例如 AWS Lambda 允许您配置环境变量：
https://docs.aws.amazon.com/lambda/latest/dg/env_variables.html
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/
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.
保留上述内容，以防人们通过查看 Serverless 标签发现这一点。以下更新基于更新的问题。
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.
因此，如果我正确理解了更新的问题，您希望将除 API 密钥之外的所有代码都签入 git，仅在本地文件系统上提供文件，并使该本地副本能够访问 API 密钥。
The simplest way to do this would be to just have another .js file that defines the variable(s) in question like so:
最简单的方法是使用另一个 .js 文件来定义相关变量，如下所示：
// config.js
var config = { // this should be const instead if you're using ES6 standards
apiKey : '123456789XYZ'
}
Then, in index.html have another script tag that calls that before any scripts that need the config, e.g.:
然后，在 index.html 中有另一个脚本标签，在需要配置的任何脚本之前调用它，例如：
<script src='./config.js'></script>
<script src='./main.js'></script>
</body>
In main.js you will then be able to reference the variable configfor use, and similarly you can .gitignore 'config.js'.
在 main.js 中，您将能够引用config要使用的变量，同样您可以 .gitignore 'config.js'。
回答by deya tri
If you use MVC, try to write in php variabel. Than open in script javasript with echo ...
如果您使用MVC，请尝试使用php variabel 编写。比在带有 echo 的脚本 javasript 中打开...
