在react应用程序中使用API密钥

我有一个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}`

谷歌的 best practice tips

不要在代码中直接嵌入API键

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

在我的 指数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键的规范方法?还是由个人开发者决定?

谢谢你的帮助!