DEV Community

Cover image for Hiding API Keys in Your Code

Hiding API Keys in Your Code

Ivana Croxcatto on June 13, 2020

Let's say you are using a fetch in React App to get info from an API, and are using your API key to connect to that API. The key is private, and sh...
Collapse
 
galabov93 profile image
Yordan Galabov

Using Environmental variables on the front end doesn't make them secret. In the example you gave the API key will be visible in the xhr request.

Collapse
 
ivana_croxcatto profile image
Ivana Croxcatto

And I just checked the XHR request, and it is visible, as you say. So, please, if you can, explain what would be a best solution in this case (using React, GitHub and Zeit), so I can edit accordingly and use a good practice.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

Zeit can also have serverless functions in /api/ folder.

Thread Thread
 
ivana_croxcatto profile image
Ivana Croxcatto

Thanks!! Good to know, I'll check it out.

Collapse
 
ivana_croxcatto profile image
Ivana Croxcatto

Thanks for your comment!! Then, could you help me understand how can I keep them hidden? (newbie here!)

Collapse
 
galabov93 profile image
Yordan Galabov

The easiest and cheapest way is with serverless functions like netlify.com/products/functions/. They play the role of back end and there you can use.env to hide the key.

Thread Thread
 
ivana_croxcatto profile image
Ivana Croxcatto

Thank you so much!! :)

Collapse
 
dayesouza profile image
Day Souza • Edited

I Just did that with my Netlify deploy, and it’a great. But as far as I know, one way to hide this from the front end request is having a back-end API to do this call for you, so your front end just calls it and it returns the values, without the key showing up

Thread Thread
 
ivana_croxcatto profile image
Ivana Croxcatto

It would not work for me at the moment, because I am just working on the Front-End development, but thanks for taking the time to share your knowledge :)

Thread Thread
 
khoja_suban profile image
Suban Khoja

Well Said. This is called abstraction and everybody learn it but many of them don't know how to apply it. What you told is perfect example of it

Collapse
 
bias profile image
Tobias Nickel

lets say your app catches on and get a lot of users, having them use the token directly or in a cloud function your token will on many services blocked faster, then you can say "cool people love my app".

A way to somehow throttle and cache the requests can be needed sooner then later. API keys from facebook or twitter have very clear limits defined. other like some map-tiles for an open-street-map app, ask you to cache, other map services specifically do not allow you to do caching on your side. The situation will be different for free APIs or a service your company pay for, such as slack.

Collapse
 
bigcodenerd profile image
Utkarsh Bhatt

As others have also said, I think the API key will be visible in the Network tab in your browser. If you really want to hide the api key, then you can use Cloudflare Workers for the purpose.

Here's an article related to it.

bigcodenerd.org/map-cloudflare-wor...

Disclaimer: It's my website, but I think the article is relevant to this use case.

Collapse
 
ivana_croxcatto profile image
Ivana Croxcatto

Thank you for sharing!

Collapse
 
johnny93u profile image
John Uil

Hey, this is a way to keep your API Keys out of the git repo, but it will still expose them on the browser. To avoid this you can set up the infra for a serverless function from scratch or use something like Netlify Functions to act as a proxy as others have stated (make sure to add CORS to protect unwanted browser calls). I would personally use KOR Connect, it allows me to secure my API keys with a new public endpoint provided by KOR and I not have to worry about .gitignore in my repo, nor do I have to worry about the keys in the frontend. KOR Connect also secures calls from the origin from on or off the browser (no other service does this, pretty cool). Plus it's free! lol Here is a blog I was reading about this before I tried it dev.to/korconnect/quickest-way-to-...

Hope this is helpful, happy coding!

Collapse
 
nunocpnp profile image
Nuno Pereira

You can check:

dev.to/nunocpnp/protecting-api-key...

how to use netlify serverless functions to do it, hope it helps

Collapse
 
ivana_croxcatto profile image
Ivana Croxcatto

Thank you!! :)

Collapse
 
kevinhch profile image
Kevin

But how can I have my API_KEY if I don't use netlify or heroku

Collapse
 
ivana_croxcatto profile image
Ivana Croxcatto

Hi Kevin! How can you have the API Key? If I understand your question correctly, the API Key is something provided by the API you are using, not related to netlify or heroku. It is something you get from the API, and usually explained in the API documentation.
If you mean how to hide your API Key if you are not using netlify or heroku, I think it depends (and there are folks here with much more experience than me that can help us both with that!). In my case, I am using zeit (or vercel, which is similar to netlify or heroku) to be able to show my code but these are still mock projects, not really apps that people would use.
You can read the comments in the thread for this post, as other programmers are suggesting great ideas on how to actually hide the API key from server side, serverless functions, etc. and they might be of great help!