How do I securely use Google API Keys

Question

So I am using the Google Maps API on my first project that I am doing... So yes I am new and I am sorry if this is basic or obvious but I haven't been able to find a clear answer or direction. Below is the documentation I found from Google about securely using the API Key.

---

Best practices for securely using API keys

When you use API keys in your 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. To keep your API keys secure, follow these best practices:

Do not embed API keys directly in code: API keys that are embedded in code can be accidentally exposed to the public—for example, if you forget to remove the keys from code that you share. Instead of embedding your API keys in your applications, store them in environment variables or in files outside of your application's source tree. Do not store API keys in files inside your application's source tree: If you store API keys in files, keep the files outside your application's source tree to help ensure your keys do not end up in your source code control system. This is particularly important if you use a public source code management system such as GitHub. Restrict your API keys to be used by only the IP addresses, referrer URLs, and mobile apps that need them: By restricting the IP addresses, referrer URLs, and mobile apps that can use each key, you can reduce the impact of a compromised API key. You can specify the hosts and apps that can use each key from the console by opening the Credentials page and then either creating a new API key with the settings you want, or editing the settings of an API key. Delete unneeded API keys: To minimize your exposure to attack, delete any API keys that you no longer need. Regenerate your API keys periodically: You can regenerate API keys from the Cloud Platform Console Credentials page by clicking Regenerate key for each key. Then, update your applications to use the newly-generated keys. Your old keys will continue to work for 24 hours after you generate replacement keys. Review your code before publicly releasing it: Ensure that your code does not contain API keys or any other private information before you make your code publicly available.

---

Now my problem is I can't figure out how to incorporate the Google Map on my website without directly putting it in the code. Right now my API is in my index.html like this:

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

But again this is directly in my code for the world to see which I believe is the wrong way.

Solution 1

For the Google Maps Javascript API v3 the keys must be public on you page. The applicable text is:

Restrict your API keys to be used by only the IP addresses, referrer URLs, and mobile apps that need them

Go to the Google API Console and generate a key, restricting it to URLs that you own (or want to put maps on) to prevent quota "theft".

Solution 2

The API key best practices article you refer to only provides general guidelines for using API keys, and with certain end-user facing APIs, such as the Google Maps JavaScript API, you cannot avoid exposing the API key to the end user.

In a public Maps JavaScript API app it is therefore strongly recommended to add a referrer restriction to any key used in a production system, especially public facing ones, and only authorize the domain, host or even full file URL of your app.

When you create your key in the Google API Console and choose the set up credentials for the Maps JavaScript API, the wizard will instruct you how to secure the key, and will prompt you for URLs you wish to authorize.

Comments

[Danny Ocean]

restricting it to URL isn't secure since http referrer can be easily spoofed

[armyofda12mnkeys]

@Danny Ocean, If restricting it to a URL isn't secure (since http referrer can be spoofed or someone can run your api-key on their box with hosts file pointing your url to their localhost server), then what is best for securing Google API keys like Javascript Google Maps API which expose the api key to the client/end-user (instead of a hidden server-side api-key)? I dont think i saw other ways to restrict the key in Google Dev Console (by IP, but that wouldn't work for client-side api-keys since end-users have different ips for a public website).

[Danny Ocean]

@armyofda12mnkeys when I researched this topic the only secure way of doing that (by secure I mean impossible to stole the API key) would be a reverse proxy. Unfortunately, when using google JS SDK it wouldn't really work. You'll be able to fetch the SDK without exposing API key, but once SDK is downloaded on the client it will make requests using your API key which can be easily observed via browser developer tools, for example. However, if you'll use REST API instead of SDK you can proxy these requests without exposing the API key. Not sure if google provides corresponding REST API, though.

[fIwJlxSzApHEZIl]

Would you just use a second key then for localhost testing? Since you wouldn't want to enable requests from localhost on a production key?

[Purna]

did anyone find the answer to this, since the referrer can be spoofed? proxying is a solution but seems to be more work looking for a simpler solution without compromising.