在 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>

与此问题相关，将 API 密钥存储在常量中是否安全，就像我为 MY_OTHER_KEY 所做的那样?

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 标头来限制.有关保护这些密钥的功效的更多信息 此处.但是 API 密钥(如 MY_OTHER_KEY)不应在客户端使用，也不应在脚本标记中呈现或存储在客户端 JS 中.

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屋！