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