0

I've been looking through several ready-made vue components for autocompleting search using Google api. For instance this one and that one. And it seems to me that all of them let the user have an access directly to their Google Places API key (at least I can see it just in a page source of their demo sites).

Is it a right approach? How to deal with the fact that someone can take this key and quickly exceed the quota? Sorry for the naive question.

Philipp Chapkovski
  • 1,949
  • 3
  • 22
  • 43

1 Answers1

0

seems the best solution for the frontend only is to restrict your API key, which can be easily spoofed. Alongside other solutions that Google suggests are [link]:

  • Restrict your API keys
  • Independent API key per app
  • Delete API keys no longer needed
  • Exercise caution when regenerating keys
  • Monitor API key usage for anomalies

unless you could manage to implement a backend API version of it and query your backend API instead of Google API and then you could practice some solutions like rate limit on your backend API.

Amirmasoud
  • 590
  • 4
  • 11
  • 27
  • Thanks! I know that I use HTTP referrer to limit the use of my api key to my website only, but I just don't know how to 'set' it in the js code - or is it set automatically? Sorry for stupid questions – Philipp Chapkovski Apr 26 '20 at 16:21
  • No problem, As Google Map Platform refers `The restriction becomes part of the API key,` and so it will be automatic in that sense. https://developers.google.com/maps/api-key-best-practices#restrict_apikey – Amirmasoud Apr 27 '20 at 05:41