Google has potentially been stepping up notifications about Google API keys that are unrestricted in recent months. Cardinal support has received a few tickets about this and it made sense to add a post about these email notifications and what to do if and when you receive one. Do pay attention to these emails, which will arrive from the [email protected] address, because they can contain important information about key misuse. If one of your API keys is unrestricted and is public facing, it’s possible for another website to simply copy and use your key from the HTML source, which counts against your Google Cloud Platform billing totals.
For example, if you see a URL in the email that you don’t recognize, you’ll want to take steps to immediately restrict your API key/s. It’s strongly recommended to restrict your front-end keys either way.
As a reminder, Cardinal Store Locator requires two Google Maps API keys as pictured below.
- A front-end key that is publicly exposed and used to display maps on the front-end of the website and geocode user input addresses and zip codes.
- A back-end key that is not publicly exposed and cannot have any restrictions. There is more explanation of why this is needed in this post. This key is used for back-end geocoding requests when a location is added or updated.
To restrict and secure your front-end Google Maps API key it’s strongly recommended to enable referrer restrictions. To do that you must first login to your Google Cloud Console account and then take the following steps:
Make sure your project is selected on the left-hand side of the top toolbar as pictured:
From the navigation menu, opened by clicking on the hamburger icon on the very left, go to APIs & Services > Credentials.
The API keys associated with the project will display under the API Keys section. Determine which key is the front-end key by clicking the SHOW KEY link on the right-hand side of the section and compare to the value used in the Cardinal Store Locator front-end key setting (assuming you’ve already set one up and have saved it). If they key is unrestricted you’ll see an orange caution icon next to the name of the key like the one below.
Click on the key name to open the settings for the key and under the “Set an application restriction” section select “Websites” from the list of options. Next, under the “Website restrictions” click the ADD button to add the website URL of the website you’re using the API/Cardinal Plugin on. It’s recommended to use the asterisk character as a wildcard to cover all paths on the domain that you’re working on. For example, *.cardinalwp.com/*. If you run into issues you can also add the domain in a more normal format such as https://cardinalwp.com. Note, it doesn’t hurt to just add multiple variations of your domain in this section.
In the last “Selected APIs” section of the screen it’s recommended to select the “Restrict key” option with the following APIs:
- Maps JavaScript API
- Geocoding API
- Directions API
- Places API
After these settings have been set, click the SAVE button at the very bottom of the screen and note that as stated, it can take up to 5 minutes for the settings to take effect.
If you’re working on project that is in development and has an unrestricted API key, make sure not to push the key to a public code repository. GitHub should notify you if this occurs but other services probably don’t offer that feature. If your unrestricted key does get published to the web and you want to keep it unrestricted, such as using it only for back-end requests, you’ll want to rotate the key – delete it and get a new one.