¿Cómo proteger la clave API de Google Maps en la aplicación Ionic?

8

Tengo la aplicación Ionic PWA publicada para Android e iOS (utilicé Capacitor para generar la compilación nativa). En el código de la interfaz, tiene mi clave API de Google Maps, sin embargo, no puedo restringirla a ninguna de las opciones que ofrece Google porque ...

Referencias HTTP : no está en un nombre de dominio público, está en un host local dentro de la vista web de la aplicación nativa. http://localhost/para Android y capacitor://localhost/para iOS. No parece muy seguro usarlos como restricciones, ya que son muy genéricos, y todas las demás aplicaciones tendrán las mismas.
Direcciones IP : por razones obvias.
Aplicaciones de Android : no está dentro del código nativo, está dentro de una vista web.
Aplicaciones de iOS : no está dentro del código nativo, está dentro de una vista web.

Ninguna de estas opciones puede funcionar para mi situación. Entonces, ¿cómo puedo proteger mi clave API del abuso?

¿Algunas ideas? No puedo ser el único que usa la API de Google Maps dentro de una aplicación Ionic.

— nachshon f
fuente

use GoogleMap nativo y siga este enlace, lo ayudará a baadiersydow.com/…

— prakash ubhadiya

Ese es el punto de usar el condensador. No tienes que usar nada nativo.

— nachshon f

4

Puede configurar el nombre de host de las aplicaciones de condensadores

"server": {
    // You can configure the local hostname, but it's recommended to keep localhost
    // as it allows to run web APIs that require a secure context such as
    // navigator.geolocation and MediaDevices.getUserMedia.
    "hostname": "unique-app",
  }

y luego restringir las claves API a capacitor://unique-app

https://capacitor.ionicframework.com/docs/basics/configuring-your-app

— PC Principal
fuente

Tengo un problema ... Después de compilar para productos, en iOS, la aplicación se abre con una pantalla en blanco. Esto solo sucede si configuro un nombre de host personalizado.

— nachshon f

3

Para proteger su clave API, debe verificar el valor de window.location.hrefdentro de una vista web. Supongo que verás algo así file://some/path.

Por lo tanto, deberá aplicar la restricción de referencia HTTP para esta ruta. Tenga en cuenta que las URL con un protocolo file: // requieren una representación especial como se explica en

https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key

Nota: file: // los referentes necesitan una representación especial para agregarse a la restricción de clave. La parte "file: //" debe reemplazarse con "__file_url__" antes de agregarse a la restricción de clave. Por ejemplo, "archivo: /// ruta / a /" debe formatearse como "__file_url __ // ruta / a / *". Después de habilitar file: // referers, se recomienda que verifique regularmente su uso, para asegurarse de que coincida con sus expectativas.

Espero que esto ayude.

— xomena
fuente

Estoy usando Capacitor, y muestra la vista web usando localhost / (android) y capacitor: // localhost / (iOS). No parece muy seguro usarlos como restricciones, ya que son muy genéricos, y todas las demás aplicaciones tendrán las mismas. Sugerencias?

— nachshon f