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.
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:
If there are other questions that guide above doesn’t answer, please let us know.
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…
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:
Gatsby has a package for this specifically:
If there are other questions about this, please reply and we’ll be happy to discuss this further.
thanks for the clarification!