Secure a Google Maps API key in an HtmlComponent

#GoogleMaps #APIkey #Security #Credentials #HtmlComponent

On the occasions that you need more advanced capabilities than what the $w.GoogleMap component provides, you can embed a Google Map in an HtmlComponent. In this case, unlike using an API in the backend code, your API key is exposed for everyone to see. Google provides a mechanism for protecting your API key. Here is what you need to do...

Go to your Google API dashboard.

Go to the Credentials panel.

Click the edit icon of the API key for your web app.

Select HTTP referrers under Application restrictions as our method of security, and then enter in the URL of your app.

Wait 5 to 10 minutes for this to take effect and then try your site:

Voila! It doesn’t work. 😕 What gives?

Notice that the browser’s Javascript Console provides the answer with the message:

Your site URL to be authorized: https://yisraelh1-wixsite-com.filesusr.com/html/3bfa8a_376d1bdeb99330c8a3fd4521d362eb4c.html

What happens is that Wix translates your URL into a system URL for the HtmlComponent (iFrame), and the browser is informing you what this system URL is. This system URL is what you need to use in you credential restrictions. However, the URL is not always the same, so we can only use the part that remains the same. In this case, I will use the "static" segment and append a wildcard (*) to the end:

https://yisraelh1-wixsite-com.filesusr.com/html/3bfa8a*

Copy that URL to your credentials, click Save, wait 10 minutes, and try again.

This time your site will load and the map will be displayed correctly. 🎉

Your API key may be exposed, but it's protected by restricting its use to your site only. This ensures that you won't exceed your quota, and won't incur any unexpected charges from Google.

I'll throw in a bonus... I've already changed my API key, so the one you see in this post no longer exists. That's another security method suggested by Google.

So, have fun with Google Maps, and don't worry, relax. 😌

Yisrael