在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密钥方面的最佳做法提示是：

不要将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.是否有在React应用程序中使用API​​密钥的规范方法？ 还是由单个开发人员决定？

自我解释，我正在寻找解决这一问题的有效方法。

谢谢您的帮助！

Answer 1

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

答案1： 请仔细阅读“ 添加自定义环境变量”以了解如何添加您作为示例显示的类型的环境变量。

2. API密钥是否仍未包含在捆绑软件中？

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

3.是否有在React应用程序中使用API​​密钥的规范方法？ 还是由单个开发人员决定？

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