17

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.

nachshon f
  • 3,540
  • 7
  • 35
  • 67
  • use native GoogleMap and follow this link it will help you https://baadiersydow.com/ionic-google-maps-geolocation-native-javascript-ios-android/ – prakash ubhadiya Nov 12 '19 at 21:47
  • That's the whole point of using Capacitor. You don't have to use anything native. – nachshon f Nov 15 '19 at 01:52
  • @nachshonf I have the same issue, setting the hostname configuration causing other problems such as connection errors, did you managed to find a solution? – Ron Yaari Sep 07 '20 at 14:10
  • The whole point of Capacitor is *not* that you don’t have to use anything native. Being able to easily access native functionality when needed but abstract it away to make it cross platform is a key benefit – Max Apr 26 '22 at 19:34

3 Answers3

9

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

nachshon f
  • 3,540
  • 7
  • 35
  • 67
PC Principal
  • 363
  • 1
  • 6
  • I'm having an issue... After building for prod, on iOS, the app opens with a blank white screen. This only happens if I set a custom hostname. – nachshon f Nov 20 '19 at 21:02
  • To get this to work on android, I also had to add a restriction for `https://unique-app/*` – mahi-man Jun 29 '21 at 22:32
  • 7
    Can't "hackers" just create their own Capacitor app where they set the hostname parameter to the same value as you? Then they could access the API and send unwanted requests. Or am I wrong? – Valentin Gavran Jul 10 '21 at 07:01
2

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.

xomena
  • 31,125
  • 6
  • 88
  • 117
  • I'm using Capacitor, and it pulls up the webview using localhost/ (android) and capacitor://localhost/ (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. Suggestions? – nachshon f Nov 15 '19 at 01:28
0

Old question but still...

If you do not want to store the api_key in your app, request it at run time from your own server over a POST https request before running any Google Maps requests.

Paranoid Android
  • 4,672
  • 11
  • 54
  • 73