Streaming live at 10am (PST)

How to hidden 3rd party API key?

Hi there,

I’m using a 3rd party API that requires a key/token that must be remain secret (not visible in the javascript calls). It is normally stored into environment variables or application configurations on the server side.

What is the way to do that in Webflow?

The closest way I found relates to Google Maps/JavaScript API Key (see screenshot)

Thank you for your help,

Hey @nmanaud

Best way would probably be custom code, you could hide it behind some sort of encryption if allowed. Which service is it? I could provide additional information if I knew which API it was.

1 Like

Thanks Julian. I’m already using custom code. The service I use is called Mapbox (


Not sure what your trying to accomplish but can’t you just use a public scope token? And also restrict access by incoming domain?

If you are just trying to display a map, you can use the public scope token, but if you are trying to allow update requests by users I would suggest using a temp token or maybe you could hide the access behind a password-restricted page.

1 Like

Yes I could use a public token but eventually I would like to allow only certain users/apps to use the basemaps that we are crafting. It doesn’t come for free and we will have to pay for extra map views.

But beyond Mapbox, my question is really related to hide API keys in general.

Google maps api keys are public and will always be publicly visible as are mapbox tokens.

With google maps, you can setup http referer restrictions to prevent other sites from using your key. Not too sure about mapbox but I’m sure there’s a way.

Whenever you are dealing with “private keys” make sure to not publish those. However, both google maps and mapbox have public keys and they’ll always be accessible by tech savvy users.

1 Like

Hi @Hollydenh

This is exactly what I’m trying to do within Webflow. Note that I’m not using Google Maps, and my question applies to any 3rd party API.