在React应用中使用API密钥 [英] Using API keys in a react app
问题描述
我有一个使用两个第三方服务的React应用程序.该应用程序是使用react-create-app启动的.
I have a React app that uses two third-party services. The app was started using react-create-app.
这两项服务都需要一个API密钥.
Both of these services require a API key.
通过脚本标签提供一个键，如下所示:
One key is supplied via a script tag, like this:
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
另一个API密钥用于请求中.我将实际密钥存储在一个常量中，并用它来构成请求.像这样:
The other API key is used in a request. I store the actual key in a constant and use it to form the request. Like this:
const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`
Google在处理API密钥方面的
Google's best practice tips on handling API keys says:
请勿将API密钥直接嵌入代码中
Do not embed API keys directly in code
这使我想到了第一个问题:
This brings me to my first question:
1.如何在index.html中使用变量?
1. How to use variables in index.html?
在我的index.html文件中，我有两个看起来像这样的标签:
In my index.html file, I have two tags that look like this:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
很显然，%PUBLIC_URL%是一个变量.如何添加变量%MY_KEY%以避免直接将API密钥嵌入我的代码中?
Obviously, %PUBLIC_URL%is a variable. How can I add a variable %MY_KEY% as to avoid embedding the API key directly in my code?
要得到这样的东西:
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
与这个问题有关，像我对MY_OTHER_KEY所做的那样，将API密钥存储在常量中是否安全?
Related to this question, is it safe to have the API key stored in a constant, like I do for MY_OTHER_KEY?
Google还说:
请勿将API密钥存储在应用程序源代码树内的文件中
Do not store API keys in files inside your application's source tree
这使我想到第二个问题:
This brings me to my second question:
2. API密钥是否仍不属于捆绑包?
说我按照Google的话做
Say I do what Google says and I
...将它们存储在环境变量或您外部的文件中 应用程序的源树
... store them in environment variables or in files outside of your application's source tree
说我将密钥存储在外部文件中.我认为该文件将在某个时候被读取，其内容要么复制到捆绑软件中，要么以其他方式引用.最后，除了可能很难找到以外，密钥是否仍在捆绑包中仍然可见?这到底有什么帮助?
Say I store a key in a outside file. That file will, I assume, be read at some point and it's contents either copied in the bundle or referenced in some other way. In the end, won't the key still be visible in the bundle, except maybe harder to find? How does this help exactly?
3.是否有在React应用中使用API密钥的规范方法?还是取决于单个开发人员?
自我解释，我正在寻找解决这一问题的反应方式，如果有的话.
Self explanatory, I'm looking for the react way of solving this issue, if there is one.
谢谢您的帮助！
推荐答案
1.如何在index.html中使用变量?
答案1::请通过添加自定义环境变量，以了解如何添加您作为示例显示的类型的环境变量.
Answer 1 : Please go through Adding Custom Environment Variables to find out how to add environment variables of the type that you have shown as an example.
2. API密钥是否仍不属于捆绑包?
答案2:即使在脚本标签中将键(MY_KEY)作为环境变量，它也会在页面上呈现并可见.通常，这些是浏览器键，旨在在客户端使用.可以通过在请求中提供Http Referer标头来限制这些内容.有关保护这些密钥的功效的更多信息
Answer 2 : Even when you have your key (MY_KEY) as an environment variable in the script tag, it will get rendered on the page and will be visible. Generally, these are browser keys and are intended to be used on the client side. These can be restricted by providing Http Referer header in your request. More on the efficacy of securing these keys here. However API keys (like MY_OTHER_KEY) are not supposed to be used on the client side and should not be rendered in the script tag or stored in the client side JS.
3.是否有在React应用中使用API密钥的规范方法?还是取决于单个开发人员?
答案3:使用第三方API密钥的标准方法是让您的客户端应用向您的后端API发送请求.然后，您的后端API按照第三方API格式化请求，添加密钥并调用第三方API.收到响应后，可以将其解压缩并将其转换为前端应用程序可以理解的域对象，也可以将原始响应发送回前端应用程序.这样，API密钥将保留在后端，并且永远不会发送到客户端.
Answer 3: The canonical way to use a third party API key is for your client side app to send a request to your backend API. Your backend API then formats the request as per the third-party API, adds the key and makes the call to the third-party API. Once it receives the response, it can either unpack it and translate it into domain objects which your front-end app would understand or send the raw response back to the front-end app. In this way, the API key stays at the backend and is never sent to the client-side.
这篇关于在React应用中使用API密钥的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
