如何在纯香草JavaScript中隐藏API密钥

Question

我正在我的一个项目中实现Google Maps API，在我将应用程序部署到Netlify上之前，我需要帮助隐藏我的API密钥。目前，我正在下面发布的脚本标签中使用API键。

<script async defer
src=`https://maps.googleapis.com/maps/api/js?key=${MY_API_KEY}&callback=initMap`
</script>

我使用的是纯香草JavaScript，没有使用任何框架或库。我有三个文件index.html，style.css和index.js。我应该如何实现这一点？

Answer 1

如果是客户端JavaScript，则不能。

您可以将调用代理到您控制的服务器，并在那里输入API密钥，这样浏览器中的用户就看不到它

Answer 2

对于应用程序中需要与您无法控制的第三方API通信的任何功能，

答案是对自己的后端进行简单的CSRF安全AJAX调用，然后让服务器端应用程序代表前端进行API调用，然后将响应返回到客户端应用程序。

更新：

• 您也可以将域列入白名单