在反应应用程序中使用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}` 

谷歌在处理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密钥仍然在捆绑中结束？

说我做什么谷歌说，我

...它们存储在环境变量或者在你的 应用程序的源代码树之外的文件

说我存储的关键在外部文件。我认为，该文件将在某些时候被读取，并且它的内容或者被复制或者以其他方式被引用。最后，捆绑中的密钥是否仍然可见，除非可能难以找到？这对此有何帮助？

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密钥停留在后端，永远不会发送到客户端。