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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
Zeit can also have serverless functions in
/api/folder.Thanks!! Good to know, I'll check it out.
Thanks for your comment!! Then, could you help me understand how can I keep them hidden? (newbie here!)
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.
Thank you so much!! :)
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
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 :)
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
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.
As others have also said, I think the API key will be visible in the
Networktab 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.
Thank you for sharing!
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!
You can check:
dev.to/nunocpnp/protecting-api-key...
how to use netlify serverless functions to do it, hope it helps
Thank you!! :)
But how can I have my API_KEY if I don't use netlify or heroku
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!