我有一个使用两个第三方服务的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方法？或者由个人开发人员决定？
自我解释,我正在寻找解决这个问题的反应方式,如果有的话.
谢谢您的帮助!