Удаление скрипта из заголовка документа с помощью jquery занимает несколько секунд, как сделать это мгновенно?

Question

Я использую Google Maps в Prod, и для этого мне нужно добавить скрипт в заголовок документа. Этот скрипт содержит ключ google maps javascript api, который используется моим приложением.

API key загружен на сервер, но все равно будет отображаться, если кто-либо выполнит проверку элемента. Чтобы предотвратить это (ish), я удаляю скрипт из головы с jquery. Однако это занимает несколько секунд, и очень легко найти ключ API, прежде чем он исчезнет из 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)
      }
    })
  }
}

Редактировать: чтобы быть понятным, мой ключ уже ограничен. Но, очевидно, это не мешает подделке, поэтому я пытаюсь усилить общую безопасность.

Answer 1

Вместо этого используйте proxy .

По сути, вы настраиваете конечную точку на своем сервере, которая будет извлекать googleMapScript, используя ключ только на сервере, а затем передает выбранный сценарий вашему пользователю. В вашем внешнем интерфейсе используйте конечную точку сервера в качестве src из <script>. Таким образом, ключ API никогда не передается конечному пользователю, он содержится только во внутреннем запросе, отправленном с вашего сервера на сервер Google API.