我在产品中使用谷歌地图,为了做到这一点,我需要向我的文档头添加一个脚本。该脚本包含我的应用正在使用的 google map javascript api
键。
API key
已在服务器端加载,但如果有人执行检查元素,该 key 仍会出现。为了防止这种情况(ish),我使用 jquery
从头部删除脚本。然而,这需要几秒钟的时间,并且在 API key 从 DOM 中消失之前查找它非常容易。有没有办法强制它立即被删除,这样它只在头部出现几分之一秒?
这是我正在使用的代码:
import Vue from 'vue'
let isApiSetup = false
let googleMapScript
Vue.prototype.$googleMaps = () => {
if (!isApiSetup) {
return new Promise((resolve, reject) => {
try {
isApiSetup = true
/* Resolve promise when google maps is loaded and remove script with API key from head */
window.googleMapsInit = () => {
delete window.googleMapsInit
// Remove script from head, but it takes a while
googleMapScript.remove()
resolve()
}
googleMapScript = document.createElement('SCRIPT')
googleMapScript.setAttribute(
'src',
`https://maps.googleapis.com/maps/api/js?key=${process.env.googleMapsAuthToken}&callback=googleMapsInit`
)
googleMapScript.setAttribute('async', '')
googleMapScript.setAttribute('defer', '')
document.head.appendChild(googleMapScript)
} catch (err) {
reject(err)
}
})
}
}
编辑:需要明确的是,我的 key 已经受到限制。但显然这并不能防止欺骗,因此我希望加强整体安全性。
最佳答案
使用 proxy相反。
基本上,您在服务器上设置一个端点,该端点将仅使用服务器上的 key 获取 googleMapScript,然后将获取的脚本提供给您的用户。在您的前端中,使用您的服务器端点作为 src
<script>
的。这样,API key 就永远不会提供给任何最终用户,它仅包含在从您的服务器发送到 Google API 服务器的后端请求中。
关于javascript - 使用jquery从文档头删除脚本需要几秒钟,如何使其即时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58284911/