0

I've been looking into the Google Autocomplete Address Form and they have some very nice examples that work well and I don't really have a problem implementing them, except that the api key is exposed in the html of the document which for me means that anyone can copy that key, use it and I get billed for it. Or maybe I'm overlooking something here? So for this reason I find that it is not very secure to use autocomplete in such way.

Examples here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

The only way around it that I can think of is to move calls to my own server where the api key would not get exposed, however I will then lose all of the javascript library functions that I can take advantages of as shown in the example above. I'm trying to figure out if there is a way to use their libraries to call autocomplete without exposing the api key to the browser or if there is not, where can I find the list of server calls I could make and have the front end call my server which then returns results from google via a server to server call?

xomena
  • 31,125
  • 6
  • 88
  • 117
Bagzli
  • 6,254
  • 17
  • 80
  • 163

1 Answers1

0

In case of Google Maps JavaScript API you cannot hide an API key from your code. In order to protect your API key from unauthorized use you must apply restrictions in Google Cloud console for your API key.

Google Maps JavaScript API supports HTTP referrers restrictions, so you can specify web sites that are authorized to use your API key. Requests from different domains will be denied.

Have a look at detailed explanation in the official documentation:

https://developers.google.com/maps/faq#keysystem

I hope this helps!

xomena
  • 31,125
  • 6
  • 88
  • 117
  • Yeah but isn't this extremely easy to spoof? Just setup an authorized domain on a local DNS and you are spoofing the referrer, right? Or manually set the referrer header in an api call. – johnw182 Nov 17 '22 at 20:34