。ev动态脚本中的变量

Question

因此，我已经使用Google Maps API制作了一个非常简单的气象应用程序，我想将其推送到git，然后进行部署。我遇到了隐藏我的api密钥的问题。我尝试使用dot.env变量，但是似乎无法运行脚本。最初，我在标记内使用了“异步延迟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