What steps should I take to protect my Google Maps API Key?

Google Maps

Google Maps Problem Overview


I have obtained a Google Maps API key for my domain.

The examples provided when I obtained my key show the key embedded in request parameters, for example:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=my-key" type="text/javascript"></script>

I appreciate that the referrer field in requests must match my domain, is it safe to make my key visible in script tags and the like? Or are there any other steps I should take?

Google Maps Solutions


Solution 1 - Google Maps

Considering that key has to be included in the <script> tags of your HTML pages, to load the JS files/data from google's servers, there is nothing you can do :

  • you must put it in your HTML files
  • every one can take a look at those.

Still, it doesn't really matter : if anyone tries to use this key on another domain than yours, they will get a Javascript alert -- which is not nice for ther users.

So :

  • There is nothing you can do ; this is the way it works
  • And there is not much you should worry about, I'd say.

Solution 2 - Google Maps

There is setting on Google API console that can protect your API bandwith usage from being used by another domain/user. You can restrict and protect that by using referrer on the API console. API Key will reject requests without referrers that match your restrictions.

Here is screenshot from Google for API Key that can only be used by Google frowm its two domains. enter image description here

Solution 3 - Google Maps

Though this question is a few years old it's a very good one. As I understand it exposing API keys, even if they are domain matched, could still lead to abuse. There's a post on Security Stack Exchange here that covers this in more detail.

The steps that you can take to avoid potential abuse have been published by Google here:

Best Practice Guide for securely using APIs: https://support.google.com/cloud/answer/6310037?hl=en

Though I would recommend taking all of it on board, there is an approach that would deal with the specific example that was posted by Brabster and that's to store the key in an environment variable. This way all you need to do is to substitute the key for a server-side variable that is stored within your project. However, be sure not to commit the file that stores the key to a public repository.

Solution 4 - Google Maps

You should use back end/server side to protect and handle key. In my case I used Django f/w server side which can serve a ajax call to get the key from server script/db then pass it onto google api.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionbrabsterView Question on Stackoverflow
Solution 1 - Google MapsPascal MARTINView Answer on Stackoverflow
Solution 2 - Google MapsIfan IqbalView Answer on Stackoverflow
Solution 3 - Google MapsrjbultitudeView Answer on Stackoverflow
Solution 4 - Google MapsSKSView Answer on Stackoverflow