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. :confused: 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. :tada:

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. :relieved:

Yisrael

2 Likes

Note: A correction was made to the original post. The entire “translated” URL used for the HTTP referrer restriction in the Google API credentials is not consistent. The post was corrected to show the segment of the URL that is consistent and that can be relied.

Added to the original post…

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*

Sorry for any inconvenience. Thanks for your understanding.

Yisrael

Hi @Yisrael … great advice … could you also advise what the syntax would be foe the “Wix” preview URL?

Best regards… Stuart

This almost got me to what I needed :wink: I am calling the google custom search api from the backend in a .jsw file. It all works fine. I would like to put restrictions on the API key in the google api console. But I’m not sure how to get access to what HTTP referrer is on the call from the backend code. Is there a general syntax based on our domain? Or is it a Wix domain? Can I use the IP address of our server?

Thanks for help.

Ken

Hi Ken, I call geotagging from a backend function which works fine, but haven’t figured how to call a map from backend code as the key needs to be in the iFrame HTML code from what I can gather. I have been able to successfully set up HTTP referrers for my live sites … but I can’t for the life of me figure out how to do this for the Wix preview url … which is a pain as I have to publish everything and effectively test in live :frowning:

No way to call a Map from the backend. That’s a Google thing.

The code includes a template explaining how to build the Preview URL. And no, it’s not pretty (no other way). But it works and I used it myself to develop several examples and sites.

If you’re calling from the backend, you pretty much don’t need to put the restrictions on the key since it’s hidden in the backend code.

@yisrael-wix hi Yisrael … sorry could you point me to the code to build the preview URL … I’m not able to find it ? regards

@stuartlynn21 Sorry, I was thinking of another issue. A discussion of the URL is above. Just try to choose the shortest segment that is consistent, but yet long enough to provide security. I can’t really supply more details than that.

Hi @yisrael-wix Google will not allow me to save the URL after appending the wildcard (*). How did you get around that?

Doing so with a backslash does not work either.