web-dev-qa-db-fra.com

Comment protéger la clé API Google Maps sur l'application Ionic?

J'ai Ionic Application PWA publiée pour Android et iOS (j'ai utilisé Capacitor pour générer la version native). Dans le code frontal, il a mon API Google Maps clé, cependant, je ne peux le limiter à aucune des options proposées par google car ...

  1. Référents HTTP - Ce n'est pas sur un nom de domaine public, c'est sur un hôte local dans la vue Web de l'application native. http://localhost/ pour Android et capacitor://localhost/ pour iOS. Il ne semble pas très sûr de les utiliser comme restrictions car ils sont très génériques, et toutes les autres applications auront les mêmes.

  2. Adresses IP - Pour des raisons évidentes.

  3. Applications Android - Ce n'est pas dans le code natif, c'est dans une vue Web.

  4. Applications iOS - Ce n'est pas dans le code natif, c'est dans une vue Web.

    enter image description here

Aucune de ces options ne peut fonctionner pour ma situation. Alors, comment puis-je protéger ma clé API contre les abus?

Des idées? Je ne peux pas être le seul à utiliser l'API Google Maps dans une application Ionic.

androidiosgoogle-mapsgoogle-apiionic4
8
nachshon f

Vous pouvez configurer le nom d'hôte des applications de condensateur

"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",
  }

puis restreignez les clés API à capacitor://unique-app

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

4
PC Principal

Afin de protéger votre clé API, vous devez vérifier la valeur de window.location.href dans une vue Web. Je suppose que vous verrez quelque chose comme file://some/path.

Vous devrez donc appliquer une restriction de référence HTTP pour ce chemin. Notez que les URL avec un protocole file: // nécessitent une représentation spéciale comme expliqué dans

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

Remarque: file: // les référents ont besoin d'une représentation spéciale pour être ajoutés à la restriction de clé. La partie "file: //" doit être remplacée par "__file_url__" avant d'être ajoutée à la restriction de clé. Par exemple, "fichier: /// chemin/vers /" doit être formaté comme "__file_url __ // chemin/vers/*". Après avoir activé les référents file: //, il est recommandé de vérifier régulièrement votre utilisation, pour vous assurer qu'elle correspond à vos attentes.

J'espère que ça aide.

3
xomena