如何在纯原生 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，没有使用任何框架或库。我有 3 个文件 index.html、style.css 和 index.js。我应该如何实现这一目标？

Answer 1

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

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

更新：

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

Answer 2

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

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