Why are my env key not hidden in dev mode?

[ainneo]

I can still see my api key appear on chrome dev tools in the network tabs… The keys are hidden in github repo, the env var has been added to Netlify’s env vars… you can not see the key in the source code, but you can see it in the dev network tabs… does Netlify have better documentation on hiding your api keys, seems like adding it there doesn’t do the trick.

[luke]

Hi, @ainneo, we don’t add the environment variables to the site code but the site build process might do this.

Regarding how to make use of API keys without including those keys in the deployed site, the usual solution is to use Functions for this. There is a support guide about this here:

[Support Guide] How do I keep my API keys/tokens safe using Netlify Functions?

Last reviewed by Netlify Support on Oct 2023 With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access. In some cases, this is fine. For instance, some types of Firebase and Faun…

If there are other questions that guide above doesn’t answer, please let us know.

[ainneo]

Thanks for the info! I’ll take a look at how to use functions to hide my keys… BUT what I was really asking is… what is the point of adding the Netlify environment variables at the build time, if Netlify is still going to show your keys in the dev tools??? I thought that would hide my keys…

[luke]

Hi, @ainneo, your build process is putting the API key in the site javascript. We didn’t add it, you did.

We won’t ever add the API key to the site files but there is also nothing to stop you from doing so either. That is what happened here. The build process (which you designed) added the API key to the javascript files. If you add the key to a file, we’ll serve that file exactly as you created it.

Technically, we might make modification to files if asset optimization is enabled but we still would never add API keys as part of asset optimization.

Why can you add an API key as an environment variable? There are a number of reasons, the two most common being 1) to make API calls during the build process itself or 2) to embed the API key in a Function as mentioned in the support guide.

For example, if is very common for sites builds to make GraphQL queries to fetch data which becomes part of the static site files. There are no GraphQL queries happening after the site is live - only during the build of the static files. Those GraphQL queries often require an API key and adding it as an environment variable makes it available for the site build and also keeps it out of the both source code and deployed site.

For a real world example, contentful supports GraphQL queries to their service:

GraphQL Content API

Gatsby has a package for this specifically:

https://www.gatsbyjs.org/packages/gatsby-source-contentful/

For reason two above, if you need to use the API key in the deployed site then the build process adds the API key to the function code (Go or node/javascript).

This again makes the API key available to the function while keeping the key out of the Git repository and deployed site javascript which reaches the end user’s browser. The site can still use the key for API calls but it isn’t in devtools. (This is because the function is being run in AWS Lambda and not in the local browser.)

If there are other questions about this, please reply and we’ll be happy to discuss this further.

[ainneo]

thanks for the clarification!