在 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

）不应该在客户端使用，也不应该在脚本标签中呈现或存储在客户端 JS 中。

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

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

Answer 2

如果您的 React 应用程序使用 VITE，那么变量必须以

开头

VITE_=你的_api

通过

获取数据

const Api_Key = import.meta.env.VITE_WEATHER_API_KEY;