Wie schütze ich den Google Maps API-Schlüssel in der Ionic App?

8

Ich habe die Ionic PWA-App für Android und iOS veröffentlicht (ich habe Capacitor verwendet, um den nativen Build zu generieren). Im Frontend-Code befindet sich mein Google Maps-API-Schlüssel. Ich kann ihn jedoch nicht auf eine der von Google angebotenen Optionen beschränken, da ...

  1. HTTP-Verweise - Es handelt sich nicht um einen Public Domain-Namen, sondern um einen lokalen Host in der Webansicht der nativen App. http://localhost/für Android und capacitor://localhost/für iOS. Es scheint nicht sehr sicher zu sein, diese als Einschränkungen zu verwenden, da sie sehr allgemein gehalten sind und alle anderen Apps dieselben haben.

  2. IP-Adressen - Aus offensichtlichen Gründen.

  3. Android Apps - Es befindet sich nicht im nativen Code, sondern in einer Webansicht.

  4. iOS Apps - Es befindet sich nicht im nativen Code, sondern in einer Webansicht.

    Geben Sie hier die Bildbeschreibung ein

Keine dieser Optionen kann für meine Situation funktionieren. Wie kann ich meinen API-Schlüssel vor Missbrauch schützen?

Irgendwelche Ideen? Ich kann nicht der einzige sein, der die Google Maps-API in einer Ionic-App verwendet.

android ios google-maps google-api ionic4 nachshon f
quelle
Verwenden Sie native GoogleMap und folgen Sie diesem Link, es wird Ihnen helfen baadiersydow.com/…
prakash ubhadiya
Das ist der springende Punkt bei der Verwendung von Kondensator. Sie müssen nichts Natives verwenden.
Nachshon f

Antworten:

4

Sie können den Hostnamen von Kondensator-Apps konfigurieren

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

und beschränken Sie dann die API-Schlüssel auf capacitor://unique-app

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

PC Principal
quelle
Ich habe ein Problem ... Nach dem Erstellen für Prod wird die App unter iOS mit einem leeren weißen Bildschirm geöffnet. Dies geschieht nur, wenn ich einen benutzerdefinierten Hostnamen festgelegt habe.
Nachshon f
3

Um Ihren API-Schlüssel zu schützen, müssen Sie den Wert von window.location.hrefin einer Webansicht überprüfen. Ich denke du wirst so etwas sehen file://some/path.

Daher müssen Sie für diesen Pfad eine HTTP-Referrer-Einschränkung anwenden. Beachten Sie, dass URLs mit einem file: // -Protokoll eine spezielle Darstellung erfordern, wie in erläutert

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

Hinweis: file: // Referer benötigen eine spezielle Darstellung, um der Schlüsselbeschränkung hinzugefügt zu werden. Der Teil "file: //" sollte durch "__file_url__" ersetzt werden, bevor er zur Schlüsselbeschränkung hinzugefügt wird. Beispielsweise sollte "file: /// path / to /" als "__file_url __ // path / to / *" formatiert sein. Nach dem Aktivieren von file: // referers wird empfohlen, Ihre Verwendung regelmäßig zu überprüfen, um sicherzustellen, dass sie Ihren Erwartungen entspricht.

Ich hoffe das hilft.

Xomena
quelle
Ich verwende Kondensator und es ruft die Webansicht mit localhost / (android) und Kondensator: // localhost / (iOS) auf. Es scheint nicht sehr sicher zu sein, diese als Einschränkungen zu verwenden, da sie sehr allgemein gehalten sind und alle anderen Apps dieselben haben. Vorschläge?
Nachshon f