CODEWITHSUNDEEP
androidiphonecordovagoogle-maps-api-3http-referer
rolinger
rolinger

Reputation: 3068

How to restrict Google Map API key in mobile app?

I have a cordova/ionic mobile app that loads google maps (in the index.html main file) into the app (both android and ios) using: https://maps.googleapis.com/maps/api/js?key=AndroidKey and https://maps.googleapis.com/maps/api/js?key=iOSKey. Each key is locked down with "app" restrictions and its not working. I discovered that web service api's can only be locked down by HTTP referrer OR Server IP.

But since the maps are loaded directly via the client, there is no HTTP referrer by domain or a server IP...is there any other way I can lock down the API keys?

Can I use something like https://github.com/wymsee/cordova-HTTP to create an HTTP referer? And if I can, what kind of legit domain referrer can I create that would work with google maps api HTTP referer restrictions?

update: someone marked this as a dup, but that post is about Android SDK API, whereas mine is about Javascript Map API.

Upvotes: 2

Views: 2356

Answers (1)

ciekawy
ciekawy

Reputation: 2337

in ionic 3/4/5 when using cordova-plugin-ionic-webview (docs) the referrer is ionic://localhost for iOS and http://localhost for Android.

  • first solution is to customize the scheme and/or hostname - this sounds like a reasonable option as this way the referrer can be set to sth like https://mobileapp.author.domain.com/ which cannot be easily stolen by a website (well another app could possible set the same).
  • similarly for capacitor "server": {"hostname": "mobileapp.author.domain.com"} can be used (as per this SO answer: How to protect Google Maps API key on Ionic app? )
  • quick'n'dirty option is to add a *://localhost/* as a website restriction - this is the only way I found to whitelist the ionic://localhost/ referrer. This should also work for capacitor which uses capacitor://localhost/

Upvotes: 3

Related Questions