.env 动态脚本中的变量

Question

所以我使用 google maps api 制作了一个非常简单的天气应用程序，我想将它推送到 git 然后部署它。我遇到了隐藏我的 api 密钥的问题。我试过使用 dot.env 变量，但我似乎无法让脚本运行。最初我在标签中使用了“async defer src=”，但无法正确连接（这是正确的术语吗？）src。一个建议是动态创建脚本，我已经这样做了，但现在无法渲染地图。我还被告知要使用 web pack 来编译它（？？？）。我对编程还是很陌生，所以我不确定如何进行这项工作。我将在下面提供一些代码：

<script>

    function initMap() {
        let lat = <%= data.coord.lat%>;
        let lng =   <%= data.coord.lon%>;
        let center = {lat: lat, lng: lng };
        console.log(lat, lng);
        let map = new google.maps.Map(document.getElementById("map"), {
              zoom: 8,
              center: center,
              scrollwheel: false
          });
        let marker = new google.maps.Marker({
              position: center,
              map: map
          });
        marker.addListener('click', function() {
            infowindow.open(map, marker);
          });
        };

const script = document.createElement('script');
script.defer = true;
script.async = true;
script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY}&callback=initMap`;
document.appendChild(script);
</script>

这是我最初的尝试。这会渲染地图，但不能使用 .env 变量：

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

我已经尝试了数周来完成这项工作，以便我可以推送和部署。如果有人能帮忙，我真的很感激！

Answer 1

您无法真正隐藏将在浏览器上加载的任何脚本标记或客户端 JavaScript 代码。即使您使用 webpack 进行编译，任何访问该网站并知道如何使用开发者工具的人仍然可以看到它。

您只需要限制对您网站的 api 密钥的访问，这样其他网站就不会使用您的 api 密钥。

以下是有关如何保护您的 api 密钥免受 Google 攻击的最佳做法：https://developers.google.com/maps/api-key-best-practices