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

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

说我做谷歌和我说的话

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

假设我将密钥存储在外部文件中.我认为,该文件将在某个时刻被读取,并且它的内容要么在包中复制,要么以其他方式引用.最后,密钥是否仍然可以在捆绑中看到,除非可能更难找到？这对此有何帮助？

3.在react应用程序中是否有使用API​​密钥的canonic方法？或者由个人开发人员决定？

自我解释,我正在寻找解决这个问题的反应方式,如果有的话.

谢谢您的帮助!

Answer 1

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

答案1:请通过添加自定义环境变量来了解如何添加您所显示类型的环境变量作为示例.

2. API密钥是否仍然在捆绑中？

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

3.在react应用程序中是否有使用API​​密钥的canonic方法？或者由个人开发人员决定？

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