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.

Answer 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".

Answer 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.