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...
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.
IP addresses - For obvious reasons.
iOS Apps - It's not within the native code, it's within a webview.
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.
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.
You must include an API key with every Maps Embed API request.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With