How to Hide Your API Keys
Vložit
- čas přidán 9. 12. 2019
- As a front-end developer it can be hard to understand API security. This video goes over how to hide your API keys, and if you even should in the first place. Concepts include gitignore, environment variables, and more.
#LearnToCode #API #WebSecurity
If you would like to support me on Patreon: / portexe
Follow me on social media! Links on my website: www.portexe.com/
---
Don't forget to leave your questions in the comments!
GAMING ➔ / portexe
Hide API key but not your moustache, great video !!
Basically this is the most clear explanation about hiding api keys with env variables on whole youtube. The fact that you mention - just using .env doesn't guaranties of hiding key from everywhere and it still is visible in browser was very important. Most of the time that part is not explained very well on blog posts and tutorials. So .env is not magically hides and shows api key only by itself it steel need backend or at least serverless functions ...
I'm honored and grateful. You rock!
Nice video, but when it comes to the solution you should have done an example rather than just saying what it has to be done
Exactly.
thank you, very good and clear explanation!!!!
No problem, glad I could help.
So informative.. .. thank you
Thanks it worked for me.
I don't normally comment on stuff but I had to here; this was one of the most informative videos I've seen on YT that was both comprehensive and succinct. Amazing explanation and thanks so much!
Had this problem today and after a few hours of researching I found out that as long as the key is in the front end it will always be exposed. I had to write and set up a backend as a middleware to solve it. The key I was using was free but VERY rate limited and thus didnt have a cors filter for my api plan.
Hi, great tutorial!! How would I do something like this in a C# application?
Thanks a lot I was really wondering how can I do that
hello so as long as the webhost i am using allows or has CORS activated then eeven if i dont use dotenv no one canactually make the API call because they are not on my webhost server? lisa
Good video, does this work irrespective of the language used.
So i have a spring boot application, which is the backend, using an api-key as well, we encrypted this and did not push this to github, but how are we going to deploy our server if the source code does not contain api_key?( we are using google app engine, that auto deploys from github whenever there's a push to main)
Is there any option to hide network activities in network tab of inspect tool?
Thanks!
Can you make video how to do this in servers side maybe using node
What about a Mapbox token for example ?
If a hacker get it, he can use my token to create he's own map and services and I'll pay for his requests.
So should I put it on the backend ?
Thanks!! great video!
One more question. I'm developing an API in Python. I configured CORS and explicitly accept calls from a set of URL's. Also i request a Token in order to protect the routes.
What is the securest way to generate this API KEYS to deliver to my clients ??
Use a well respected, well maintained 3rd party library to handle the generation of API keys.
@@PortEXE Thanks!!!
So if i made a proxy then and it uses to connect my api then but user has proxy link and it can spam the proxy
I have been learning React for over 2 months now and I feel pretty confident making websites with it. Last week I started making a website that I would be using in production and one of the things I realised was that I have to hide an API key, multiple in-fact. After googling, I came to the conclusion that if I make a simple express API that could only be accessed locally by the website which did all the API calls with the KEY then it would successfully hide it. Is this a correct solution of hiding my API key(s)?
That’s a great pattern, just make sure that you disable CORS for that API. You want to make sure that only your website can access that api. Good job!
thank u so much omg
can you show us an example of creating a proxy server with node js please
+1
when I am using .env file and use its variables Im getting an error, but if I use password, username variables normally its working well. How can I solve this problem ?
I'm at 5:20 and my environment variable is returning undefined. Any suggestions on what I am doing wrong?
edit: in case anyone else has the same issue, you need to start the variable name with REACT_APP_
restart NPM I had the same problem.
That secures the API key, but it doesn't stop anyone else using the proxy you set up....how to stop just anyone using the proxy? ...preferably without the user having to get credentials, or 'log in' etc.
Thanks
You’re welcome
Hi. I've saved my secretApiKey as an environment variable on my local system. This is then gitignored when pushing to the remote git repository. Then when I host my site on AWS (or other similar site) I define my environment variables in the env variables section of the app settings (on AWS).
As far as I can see this keeps the info safe and hidden. It isnt in the source code when I inspect. If this isnt true could you explain to me where someone would be able to find the secret info?
I did try setting up a proxy server but I was hacked immediately and it was pretty embarrassing. I'm not sure how they got my info. I've heard that hackers can clone your website to get around the CORS origin restriction?
edit: i've just rewatched the part of your video regarding on proxy servers and realised that I misunderstood what you were saying. I had the proxy server send the secretApiKey to the front end when requested, which is clearly a weakness, and not what you were saying. However, my AWS env variables solution is still good (i hope)
edit2: This doesnt work. Even the AWS env variables are available in the browser code
Great Video!!! New Dev, so excuse me if this seems like a dumb question, but What Constitutes a REALLY IMPORTANT API key? Example:
I built a web app for fun from superheroapi.com to seach and showcase some super hero data (this was before I knew about .env), and my api was stuck right in the code. I was able to get it to render locally, but when I tried to deploy to firebase, it kept kicking out cors errors. Now i dont really care if someone gets the api key and sends get requests on my behalf, since it's just a toy api in the first place. My workaround WAS going to be to run it using the cors-anywhere npm package (www.npmjs.com/package/cors-anywhere) but I realized that didn't get to the heart of my issue/knowledge gap. I put that off to the side as I got some freelance volunteer work that I was offered (pastor at a church). I built it using a gatsby starter and connected it to firebase for deployment after setting up a wordpress plugin to pull in the guy's sermons and messages to the flock(the wp plugin didn't require an api since it was just a get request to the wp server). Now at the point where I did connect the firebase plugin, I did save all the api keys to .env files as per standard. I ran gatsby build, firebase deploy, and git push to save my work. A few hours later, I got a git guardian message saying a google secret was exposed. ^%*#@%. I read up on the docs from Firebases and I kinda got the impression that the open key was like the main key and wasn't exactly a 'secret', since you were usually trying to get people to hit your page. Kaaay..... But what happens on my next project, where I have to set up an e-commerce store and process payment data? Sure want to keep that secret, right???? And I've mostly worked on front-end stuff like JS and frame-works, havent even touched server-side node, and now stack overflow is telling me to use functions to process all my calls. Kaaay.....
Questions:
Can I script api calls the same way on the back-end as on the front-end? async/await?
Will saving the API key in the back-end function keep the key protected, or should I have it reference another file inside my db or something?
Bonus and Unrelated: Would also like to set up some kind of page rebuild of his website when he makes a new post on wordpress. Can you point me in the right direction???
If you can help me out, that would be amazing.
How could I protect an API route? I only want requests from the frontend where the data is fetched from to access the "/api" route, not anyone going to the "/api" route themself. I have read a lot about JWT online, but don't really understand it still. Any chance you could explain/link to an explanation with examples? thanks.
Make sure CORS is disabled. Look into CORS.
PortEXE thanks so how exactly would I protect the route from users but allow fetch requests?
Cool video, I think a good way to secure these secret keys is by requiring your front end applications to 'login' or 'authenticate' some way. Then when logged in, they can receive a key of sorts to use to query API's etc.
Can you make a video on how to hide APIs from chunk.js files?
DOOM! Great tutorial too :)
Yes!
So you said to put the API key in the backend and use a proxy API to call from the front end. Then that proxy API can be used by literally anyone(by viewing the endpoint in the Network tab). It's just like giving the key directly to a hacker.
No that is incorrect.
In a way he is correct, however you now have the control over your server and you can validate the requests yourself before executing the request. For example, you may add authentication and tokens to ensure that user is eligible to do that request. Another example, you may throttle attacks, log incoming requests and find anomalies to detect hackers.
In general, CORS does NOT protect an API. CORS does NOT prevent something like postman from being used to call the API. Do not rely on CORS to protect the data in your API and do not expose your API key assuming that CORS will prevent it from being used.
this is the truth!
exactly, please do not rely only on CORS!!!
couldn't you "store" keys in system variables like in django and flask and access them that way? so the code you upload to the rebository just has a request to the local system variables which obviously only you can see.
It would still be easily viewable within the browser. System variables are environment variables. It’s the same thing.
Alot of important information is skipped in this
Which information would you have included
Man there's always so much fucking rambling and zero actual practical visualization or application on this topic it's crazy why can't anyone just make a decent video or guide on this shit?