动态脚本中的 .env 变量

Question

所以我使用 google 地图 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

动态脚本中的 .env 变量

.env variables in dynamic script

javascript

google-maps

ejs

api-key

dotenv