在 React 应用中使用 API 密钥

Question

我有一个使用两个第三方服务的 React 应用程序。该应用程序是使用react-create-app 启动的。

这两项服务都需要 API 密钥。

通过脚本标签提供一个键，如下所示：

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

请求中使用了另一个 API 密钥。我将实际密钥存储在一个常量中并使用它来形成请求。像这样：

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

Google 关于处理 API 密钥的 best practice tips 说：

不要将 API 密钥直接嵌入代码中

这就引出了我的第一个问题：

1. index.html中的变量如何使用？

在我的index.html 文件中，我有两个如下所示的标签：

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

显然，%PUBLIC_URL%是一个变量。如何添加变量 %MY_KEY% 以避免将 API 密钥直接嵌入到我的代码中？

要得到这样的东西：

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

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

谷歌还说：

不要将 API 密钥存储在应用程序源代码树内的文件中

这就引出了我的第二个问题：

2。 API 密钥不是仍然在捆绑包中吗？

说我按照 Google 所说的去做

... 将它们存储在环境变量或您的外部文件中 应用程序的源代码树

假设我将密钥存储在外部文件中。我假设，该文件将在某个时候被读取，其内容要么复制到包中，要么以其他方式引用。最后，除了可能更难找到之外，钥匙在捆绑包中是否仍然可见？这究竟有什么帮助？

3.是否有在反应应用程序中使用 API 密钥的规范方法？还是取决于个人开发者？

不言自明，我正在寻找解决此问题的反应方式，如果有的话。

感谢您的帮助！

Answer 1

1.如何在 index.html 中使用变量？

答案1：请通过Adding Custom Environment Variables了解如何添加您作为示例显示的类型的环境变量。

2。 API 密钥不是仍然在捆绑包中吗？

答案 2： 即使您将密钥 (MY_KEY) 作为脚本标记中的环境变量，它也会在页面上呈现并可见。通常，这些是浏览器密钥，旨在用于客户端。这些可以通过在您的请求中提供 Http Referer 标头来限制。更多关于保护这些密钥here 的功效。但是 API 密钥（如 MY_OTHER_KEY）不应该在客户端使用，也不应该在脚本标签中呈现或存储在客户端 JS 中。

3.是否有在反应应用程序中使用 API 密钥的规范方法？还是取决于个人开发者？

答案 3： 使用第三方 API 密钥的规范方法是让您的客户端应用程序向您的后端 API 发送请求。然后，您的后端 API 根据第三方 API 格式化请求，添加密钥并调用第三方 API。一旦它收到响应，它可以解包并将其转换为前端应用程序可以理解的域对象，或者将原始响应发送回前端应用程序。这样，API 密钥就留在后端，永远不会发送到客户端。