Googlemaps browser api is so easy to use and less buggy, so that I use it in all my cordova(ionic)apps but I hadn’t realized the security risk until today. There is no way to restrict the API access as far as I understood. Could anyone please advice if I should use Googlemaps browser api only in web apps/websites and restrict google api access by HTTP referrers (web sites) ? If that’s the case, I have to rewrite all my related code and use native maps/google places features(I hope I can find the cordova plugins).
@reedrichards Hi reedrichards, I needs some help here and I am wondering if you can give some advice what I should do? thx.
And any other experts? Could you please help me?
@lolaswift1 Thx for pinging me, sounds like a super interesting question
If I may, which risks are you thinking of?
Don’t know exactly what you are thinking of, maybe I face the same risks
In my App, I have implemented a Google Map thru Javascript with of course CSP validation. All other API requests are performed in/from my backend (App called Backend, Backend called Google, get the answers, process them and send results back to the App)
Since Cordova app that works on mobile device does not have domain, there is no way to restrict your key usage.
That’s why Google provides native APIs, Google Maps Android API v2 and Google Maps SDK for iOS, and I provide the wrapper of those APIs for cordova and ionic.
Hi reedrichards,
Thanks for the quick response as you always did.
Well, as @wf9a5m75 said, there is no way to restrict the API key usage,that means anyone if they want, they can get your API key since it’s hard coded in your code. And you will have no way to find out if they use your key in their apps. Since google has changed their pricing to pay-as-you-go, that means, you could end up having a very big bill. Basically, I see two possible solutions to this, one is what @wf9a5m75 mentioned which is using the native apis. Because you put the api keys in the config.xml and this file can’t be reached by other people. Or let your backend proxy the requests to google. However, I don’t know how to do it with google maps. I know that there are npm packages which can be used if your backend is implemented using nodejs. I also raised a ticket at Google but more or less they will give the same answer I guess. I’ve learned this lesson in the hard way since it’s going to be a lots of work to rewrite the map/place autocomplete part completely. I might end up leaving the goolge place autocomplete out and just implement the maps using the native apis.
thx for the further explanation @lolaswift1, now I understand your concern
you are right I don’t really see a solution right now right here.
spontaneously I’m asking my self if it would be possible to load the script asynchronously and get/receive the key from the backend.
or is it possible to specify a domain thru kind of a proxy in order to secure the access for the key in the API console? (see screenshot)
Update: I’m still thinking about it because in order to be PWA compatible I rather not use plugins. So I was just thinking about the idea of getting the key from the backend but actually that’s not a 100% secure solution neither. Ok it won’t be shipped with the app anymore but some sneaky person could still find it by sniffing or reading it once loaded
Definitely an interesting question. With a lot of security matters we need to consider what we are trying to protect and how important it is that we protect it (i.e. hiring a team of trained guards to protect millions of dollars worth of jewels, versus hiring the same team to protect your lunch in the work fridge).
So I think it is interesting to consider how important it is to protect the Google API key. Obviously the concern here is that someone takes your key and starts using up your quota, potentially costing you money. I’ve never run into this situation so I’m not sure how it would play out. Does the Google Maps API monitor/block suspicious traffic? Since people can get their own key for free anyway, is it worth the effort to steal someone else’s (except for in cases where they want to do something malicious/use a very high amount of requests - in which case, would Google block these requests anyway?).
I’m not trying to speak authoritatively here, these are just questions to consider. In terms of protecting a Google Maps API key for the JS SDK when running in a hybrid app, the only way I can think of right now that would have any significant impact is to use a plugin to spoof the referrer so that to Google it looks like the request is coming from yourdomain.com, and then restrict your API key to that referrer. I don’t know if this would actually work (I’ve never tried it), or whether it would break any of Googles terms of service. I believe people would still be able to use your key anyway by also spoofing the referrer on their end to match, but it would greatly restrict the ways in which they could use that key.
In my opinion, it seems like this is an issue that would rarely ever be an issue. The biggest concern is that now since you have to associate payment with your account, you run the risk of breaching the free threshold and running an absurdly high bill. Again, I don’t know if Google would just detect this automatically and block it. If there is a way to limit the max amount you pay for the API, that could also help to stop any nasty surprises.
I’d be very interested to hear from people who know some of the specifics of how the API deals with stuff like this. It seems to me that even if you are running Google Maps on a website, and restrict the referrer to your domain, someone who doesn’t like you very much could still take that API key, spoof the referrer header, and spam requests to the API (which is why I assume Google would have some smarts around this).
Good point here about PWA. I didn’t think about that.
Since PWA is a trend, google should come up something smart to address this as well. My case has been assigned to the google cloud team, I am curious about what they are going to say.
Hi Josh, thx for joining the discussion.
All valid points, there is no absolute security. I like the analogy.
I will keep you guys updated about what google is going to say.
@lolaswift1 with the PWA, like a website, you could block the domain in the key. But like @joshmorony well explained, if you think fully about it, there is probably some questions too
about your case, could you link it here in this issue? in case of private issue, you keep us posted?
You’re right. I wasn’t not full awake yet i guess Yes, PWA is just a website.
Not possible to link it here since the ticket is only available via my support portal. But I will keep you all posted.
@robinyo cool! thx for the link. that could maybe be a solution for my case. since all my app is behind an http guard, only logged user would be able to find the API key if I serve it from the background
I should think about it, maybe it’s an overhead to, yes there is a risk that the key could be stolen but will that happens…
google support said using file:// referers and monitor closely your api usage is one of the solutions can be used. However, this solution still has low risks. If someone get your key and your path, they will be able to call you api.
btw, I can’t I get the file:// referers. do you know reeedrichards?
Yes, PWA is just a website.