我有一个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. How to use variables in 100?
在我的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. Doesn't the API key still end up in the bundle?
如果我照谷歌说的做，我
... 将它们存储在环境变量或外部文件中
假设我把一个密钥存储在一个外部文件中.我认为，该文件将在某个时刻被读取，其内容要么在包中复制，要么以其他方式引用.最后，除了可能更难找到外，密钥在包中不是仍然可见吗？这到底有什么帮助？
3. Is there a canonic way of using API keys in a react app? Or is it up to the individual developer?
不言而喻，我正在寻找解决这个问题的方法，如果有的话.
谢谢你的帮助！