在反应应用程序中使用API密钥
我有一个使用两个第三方服务的React应用程序。该应用程序开始使用react-create-app
。在反应应用程序中使用API密钥
这两个服务都需要一个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.如何使用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.在反应应用程序中使用API密钥是否有一种典型方法?还是由个人开发者决定?
自我解释,我正在寻找解决这个问题的反应方式,如果有的话。
谢谢你的帮助!
1.如何在index.html中使用变量?
答1:请通过Adding Custom Environment Variables找出如何添加已作为示例显示类型的环境变量。
2. API密钥是否仍然存在于捆绑包中?
答2:即使你有你的密钥(MY_KEY
)作为脚本标签的环境变量,它会被呈现在页面上是可见的。通常,这些是浏览器密钥,旨在用于客户端。这些可以通过在请求中提供Http Referer头来限制。更多关于保护这些钥匙的功效here。然而,API密钥(如MY_OTHER_KEY
)不应该在客户端使用,不应该在脚本标记中呈现或存储在客户端JS中。
3.在反应应用程序中使用API密钥是否有一种典型方法?还是由个人开发者决定?
答3:使用第三方API密钥的正规途径是为您的客户端应用程序发送到后端API的请求。您的后端API会根据第三方API格式化请求,添加密钥并调用第三方API。一旦收到响应,它可以解压缩并将其转换为您的前端应用程序可以理解的域对象,或者将原始响应发回给前端应用程序。通过这种方式,API密钥停留在后端,永远不会发送到客户端。
国际海事组织你已经做到了“反应”的方式,将其作为常数存储。不知道他们希望你做什么。 –