在react应用程序中使用API键

Question

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

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

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

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

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

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

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

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

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

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

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

谷歌还表示：

不要将API键存储在应用程序源树中的文件中

说我照谷歌说的做

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

假设我把钥匙存放在一个外部文件里。我假设，该文件将在某个时刻被读取，其内容要么复制到包中，要么以其他方式被引用。最后，密钥在包中是否仍然可见，只是可能更难找到？这到底有什么帮助？

谢谢你的帮助！

Answer 1

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

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

2.API密钥最后不是还在捆绑包里吗？