How to hide your APIs, Keys and Secrets from the FRONTEND and BROWSER
ฝัง
- เผยแพร่เมื่อ 4 ธ.ค. 2021
- How to hide your APIs, Keys and Secrets from the FRONTEND and BROWSER
In this video, I am showing you How to hide your APIs, Keys and Secrets from the FRONTEND and BROWSER using Proxy Server. I am going to use a frontend app which has the use of an API, a secret ID and a secret value and I am going to hide them so that none of these values can be accessed from the frontend or even the browser. Watch the full video to understand how the things are done.
I am Ishraq Haider Chowdhury. I am a software developer by profession. Currently I am residing in Bamberg, Germany to pursue my Masters Degree. I code whenever I want, whatever I see interesting. I am more into React.js, Node.js and Django. I am liking Java (Spring Boot) as well. I am actively posting on my social networks about coding and behind the scenes of coding. I would appreciate some support if you subscribe to this channel and follow me on my other social media. The links are given below:
My portfolio website ► ishraqportfolio.netlify.app
My Github account ► github.com/iamishraqhc
Join My Discord Server ► / discord
📸 My Instagram Page ► / codewithishraq
👍 My Facebook Page ► / codewithishraq
🐦My Twitter Page ► / codewithishraq
♪ My TikTok Page ► / codewithishraq
📌 My Pinterest Page ► / codewithishraq
▶️ My 2nd TH-cam Channel ► / venturetowardssuccess
▶️ My Vlog Channel ► bit.ly/venturesoflife
========================================
METADATA:
How to hide your API Keys and Secrets from the FRONTEND and BROWSER using proxy server,How to hide your API Keys and Secrets from the FRONTEND and BROWSER,hide your api,hide api key javascript,hide api key react,code with ishraq,how to hide your api keys,how to hide your api key in javascript,hide api key,api keys,environment variables
How to hide your API Keys and Secrets from the FRONTEND and BROWSER using proxy server,How to hide your API Keys and Secrets from the FRONTEND and BROWSER,hide your api,hide api key javascript,hide api key react,code with ishraq,how to hide your api keys,how to hide your api key in javascript,hide api key,api keys,environment variables - บันเทิง
![[TH] VCT Masters Shanghai Playoffs DAY 5 // 100T vs PRX | FUT vs TH](http://i.ytimg.com/vi/q75pv359eP4/mqdefault.jpg)
Great explanation, thanks a lot! It would be nice if you also share with us how to use that in production, after deploying to vercel, for example. Maybe even using a serveless function approach.
great explanation! thanks!
thank you a lot for your help!
I am glad it was helpful!
Hi! Thank you for the video. But my question is...how can I publicate my project after doing this? Can I publicate this in Github, and deploy it using Vercel. Will it still work?
Hello Ishraq,
Good example!
I tried to do the same with just one single folder in react and it did hide the API key and the app works properly, but when I deploy it in Gh-pages it doesn’t work! What could I be missing?
I would appreciate it you could help me
Thanks 😊
Sir if we use like this api key does get show in network tab? please let me know
Hi , guys I use dynamo DB graph ql query for the fetching data so in my scenario if I fetch the post from the post table along the data it return all the users personal information in response from the graphql query so I want stop this can any one can answer this
Thanks for the video. I got my site to work locally with this video! I don't think I was too far off from what I originally had. I have a question though, how can I run the client and and server with "npm start"? I tried "npm start" and it just launches the front-end site, not the server. To get it to work, I have to run "npm start" in one terminal and "npm start-dev-server" in another terminal. How can I fix this?
You can use concurrently (it's a npm package)
You should add proxy to package.json to hide server link url, at client just see '/recipes/${query}
Noted thanks!
Can we do it with an angular APP with version 8
Does it show in the network tab?
Does the api key will show in "Headers" under the NETWORK tab in inspecting???
No, it won't show up in Headers. Because now who's sending the get request to the API (and passing the key) is the server, and the server's request to the API is not accesible through the browser. Only the response the server sends back (pure json) will be acessible in the browser and in the front-end.
Hello, have a question, what if the user looks not in the source code but in Network -> Fetch/XHR ? He steel can see the secret key
This is the most IMPORTANT QUESTION. I actually thought he was going to open the Code Inspector's NETWORK TAB, but he didn't. The Network TAB could reveal all secret information.
12:01 Get request
What's with the creepy music? :)
😂 bad bro but loclhost api show in network tab 😅😅