Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to protect Google Maps API key on Ionic app?

I have Ionic PWA app published for Android and iOS (I used Capacitor to generate the native build). In the frontend code, it has my Google Maps API key, however, I can't restrict it to any of the options google offers because...

  1. HTTP referrers - It's not on a public domain name, it's on a local host within the webview of the native app. http://localhost/ for Android and capacitor://localhost/ for iOS. It does not seem very secure to use these as restrictions as they are very generic, and all other apps will have the same ones.

  2. IP addresses - For obvious reasons.

  3. Android Apps - It's not within the native code, it's within a webview.
  4. iOS Apps - It's not within the native code, it's within a webview.

    enter image description here

None of these options can work for my situation. So how can I protect my API key from abuse?

Any ideas? I can't be the only the one using Google Maps API within an Ionic app.

like image 452
nachshon f Avatar asked Nov 12 '19 21:11

nachshon f


People also ask

Can you expose Google Maps API key?

When you use API keys in your Google Cloud Platform (GCP) applications, take care to keep them secure. Publicly exposing your credentials can result in your account being compromised, which could lead to unexpected charges on your account.

Does Google Maps need API key to embed?

You must include an API key with every Maps Embed API request.

Should I restrict my API key?

Why should I restrict my API keys? Restricting your API keys helps ensure your Google Maps Platform account is secure. Just like the keys to your house or your car, it's important to protect them to make sure they can only be used by the people and in the way you want.


2 Answers

You can configure the hostname of capacitor apps

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

and then restrict the the API keys to capacitor://unique-app

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

like image 138
PC Principal Avatar answered Sep 20 '22 12:09

PC Principal


In order to protect your API key you have to check the value of the window.location.href within a webview. I guess you will see something like file://some/path.

So you will need apply HTTP referrer restriction for this path. Note that URLs with a file:// protocol require special representation as explained in

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

Note: file:// referers need a special representation to be added to the key restriction. The "file://" part should be replaced with "__file_url__" before being added to the key restriction. For example, "file:///path/to/" should be formatted as "__file_url__//path/to/*". After enabling file:// referers, it is recommended you regularly check your usage, to make sure it matches your expectations.

I hope this helps.

like image 33
xomena Avatar answered Sep 16 '22 12:09

xomena