javascript - .env 动态脚本中的变量
问题描述
所以我使用 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>
我已经尝试了好几个星期来完成这项工作,以便我可以推送和部署。如果有人能帮忙,我真的很感激!!
解决方案
您不能真正隐藏将在浏览器上加载的任何脚本标记或客户端 JavaScript 代码。即使您使用 webpack 进行编译,任何访问该站点并知道如何使用开发人员工具的人仍然可以看到它。
您只需要限制对您站点的 api 密钥的访问,以便没有其他站点使用您的 api 密钥。
以下是有关如何保护您的 api 密钥免受 Google 攻击的最佳实践:https ://developers.google.com/maps/api-key-best-practices
推荐阅读
- single-sign-on - 登录后如何在 cas 服务器上设置额外的会话 cookie
- c - C中的Malloc 2D金字塔数组
- visual-studio-2017 - VS2017 v15.7.1 - 构建 | 发布创建不同的程序集来构建 | 重建解决方案
- css - 是否可以在输入中包含一个元素?
- c# - 使用不同的用户控件重用 Window 是否会破坏 MVVM 模式
- model - 在 spacy 中,如何使用自己在 gensim 中创建的 word2vec 模型?
- wordpress - WordPress :: add_action 插件简码
- r - 在 ifelse 条件下应用
- javascript - Fullcalendar 获取日期和时间以及步进
- eclipse-photon - 类“org.slf4j.MavenSlf4jFriend”的签名者信息与同一包中其他类的签名者信息不匹配