web-dev-qa-db-ja.com

IonicアプリでGoogle Maps APIキーを保護する方法は？

Ionic PWAアプリをAndroidおよびiOS用に公開しました（Capacitorを使用してネイティブビルドを生成しました）。フロントエンドコードにGoogle Maps APIが含まれています）ただし、キーをGoogleが提供するオプションに制限することはできません...

  1. HTTPリファラー-パブリックドメイン名ではなく、ネイティブアプリのWebビュー内のローカルホストにあります。 http://localhost/ for Androidおよびcapacitor://localhost/ for iOS。これらは非常に一般的であり、他のすべてのアプリは同じものになるため、これらを制限として使用することは安全ではないようです。

  2. IPアドレス-明らかな理由による。

  3. Androidアプリ-ネイティブコード内ではなく、ウェブビュー内です。

  4. iOSアプリ-ネイティブコード内ではなく、ウェブビュー内です。

    enter image description here

これらのオプションはどれも私の状況では機能しません。では、どうすれば乱用からAPIキーを保護できますか？

何か案は？ Ionicアプリ内でGoogle Maps APIを使用するのは私だけではありません。

androidiosgoogle-mapsgoogle-apiionic4
8
nachshon f

コンデンサーアプリのホスト名を設定できます

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

aPIキーをcapacitor://unique-appに制限します

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

4
PC Principal

APIキーを保護するには、Webビュー内のwindow.location.hrefの値を確認する必要があります。 file://some/pathのようなものが表示されると思います。

したがって、このパスにHTTPリファラー制限を適用する必要があります。 file：//プロトコルを使用したURLには、で説明されているように、特別な表現が必要です。

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

注：file：//リファラーをキー制限に追加するには、特別な表現が必要です。 「file：//」の部分は、キー制限に追加する前に「__file_url__」に置き換える必要があります。たとえば、「file：/// path/to /」は「__file_url __ // path/to/*」の形式にする必要があります。 file：//リファラーを有効にした後は、使用状況を定期的にチェックして、期待どおりであることを確認することをお勧めします。

これがお役に立てば幸いです。

3
xomena