Hide API Keys Without dotenv environment variables | Hiding API Keys in Javascript Netlify
ฝัง
- เผยแพร่เมื่อ 13 ธ.ค. 2020
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In this tutorial, you will learn how to hide your API keys without using dotenv environment variables. While there is nothing wrong with using dotenv if you are familiar with NPM, this solution is an alternative for those who are not. You should not store API keys in a public GitHub repository, and this tutorial will help you keep your API keys out of your repos.
▶ Just learning JavaScript? Check out my JavaScript Tutorials for Beginners Playlist found here: • Javascript Tutorials f...
✅ Quick Concepts outline:
Hide API Keys without dotenv
• OpenWeatherMap API example
• Utilize .gitignore to avoid storing your API key on GitHub
• Use a JavaScript module import
• Practice the git bash commands before constructing the build command
• Enter the new build command for your project on Netlify
• Trigger a new deploy
• Verify your API key is imported and working
🤖 API used in the examples for this tutorial:
• openweathermap.org/api
📚 Further Reading:
MDN Web Docs - Modules:
developer.mozilla.org/en-US/d...
Netlify Docs - Get Started with Build Configuration: docs.netlify.com/configure-bu...
📺 More Beginner JS Videos:
freeCodeCamp: • Learn JavaScript - Ful...
Traversy Media: • JavaScript Crash Cours...
The Net Ninja: • Modern JavaScript Tuto...
✅ Follow Me:
Twitter: / yesdavidgray
Reddit: / daveoneleven
Medium: / davegray_86804
#hiding #api #keys - วิทยาศาสตร์และเทคโนโลยี
This tutorial helps you keep your API key out of your code repository. That said, if you want to learn how to keep your API key completely out of your frontend code, you will want to watch my tutorial about setting up a NodeJS API Key Relay: th-cam.com/video/uk9pviyvrtg/w-d-xo.html
You can also use a sql server in another data center install sql php and apache and something cool to encript/decript stuff. encrypt the keys in a very secure way so it can be decrypted by your machine only, store the encripted keys in SQL database write some php allow your domains that use any of the keys only to access your servers others should not get an answer from the server. From here there are multiple methodes on how you can or might want to use the keys including decoding and sending it to some secret place on your websites server over end to end encrypted connection and use it on your webserver. your websites webserver should delete the file when it's no longer needed . Yes it's not as fast as what you do but it is very secure and not easy to find the data and even if someone is able to get access to the database they are not able to crack the keys and more important if they crack the keys most people do not know how to use them and what the keys should be used for... maybe you want to try something like this, it's what I did 15 years ago and it is still very secure however if the hackers want to there is no system secure enough but this is hard to hack...
Good luck and happy coding !
Best Regards,
I guess it is pretty off topic but does anybody know a good site to stream new series online?
@Harlem Julian Flixportal xD
@Korbin Kylo Thank you, I went there and it seems like a nice service =) I really appreciate it!
@Harlem Julian No problem :)
I will never forget you, Dave Gray. Thank you so much for being so cool! Greetings from Colombia.
Hi, the test.js file you created, wont that be on github anyways showing the keys?
No, it will not go to Github. The apikey.js file is in the .gitignore file. That keeps it from going to Github. If you are referring to the file created on Netlify, it won't go to Github either. Netlify pulls files from the Github repo, but it does not send files to Github. I hope that helps to clarify 💯
Hi, thank you for the video. How about smudging and cleaning data so whenever I checkout a branch the api key is updated?
A different approach involving a little more upfront work, but this may be a good solution for development. I have not attempted it, so I am not sure how it would work with a Netlify deploy. I may have to try it out! Good question! Anyone wondering what we are discussing can look at this link for an overview: www.juandebravo.com/2017/12/02/git-filter-smudge-and-clean/
You rock! Your long tutorials are awesome!
Thank you!
This is what I've been looking for. Thank you
You're welcome. This solution will keep the key out of GitHub. If you want to keep it out of your code completely, consider a bit more in-depth solution like this one: th-cam.com/video/uk9pviyvrtg/w-d-xo.html
Can youse .env file ? And .gitignore file can put . nodemoduls and .env files recent time ?
You can use a dot env file but you should never send it to Github. Always put the .env file in your .gitignore file. This tutorial shows how you can hide an API key from Github and still deploy to Netlify without using a .env file.
Hey i'm getting a Uncaught SyntaxError: Cannot use import statement outside a module error, what am I doing wrong?
Sounds like your script tag needs type="module". At least that is the most common cause of that error.
Dear Dave, I hope you are well. Thank you very much for your effort and the video. It's really a big help. Maybe you have time-if it's not too much trouble-to answer two questions for me: I can get your project to run locally on my Ubuntu system without any problems. However, I have problems hosting the project on netlify. My questions about this would be: 1) How can I start the project with a file index.html so that .env remains hidden and (2) do you know a way how to activate the repository on netlify? netlify deploy works, but additional modules that were integrated via package.json do not work. The background to my question is that I would like to hide a larger number of required Amazon AWS SDK API's. Does it perhaps make sense to use react at this point? I would be grateful to you for an answer, since I've been desperate here for days. Many thanks and best regards, Stefan
Javascript runs in the browser and anything used in the browser can be viewed. You can make it difficult to read with minification - that is minifying the JS files - but it will still be available to anyone that knows how to use devtools. You might consider putting the logic you want to hide in Node.js code that runs on the server. You can then set up a relay. I show how to do this here: th-cam.com/video/uk9pviyvrtg/w-d-xo.html
@@DaveGrayTeachesCode I ran the build command but my netlify app still wont make the api call.
does this still work?
You have such good content. You deserve way more subscribers.
Thank you!
If we pass an api key this way in the headers then that key value is showing in network call ...can you help how to hide that?
Right - this is just a quick way to not send it to GitHub and still deploy. You want this video: th-cam.com/video/uk9pviyvrtg/w-d-xo.html
did you find a solution ?
Is there also possible to hide also from sources tab for plain html and vanilla js?
You would need to create an API key relay as I show here: th-cam.com/video/uk9pviyvrtg/w-d-xo.html
@@DaveGrayTeachesCode thanks for answer. Will try on next project
interesting video! thank you
Thank you for the tutorial👍
You're welcome!
Thank you so much for the video.
You're welcome!
From git-hub we can hide api key this approach. but hackers can able to view our api key after deployment via source code. How we can hide our api key some one can't view our all kind of secret key.
You are correct, and I mention this in the video. This also applied to the dot env approach. I will make other videos showing the approaches I mentioned: 1) a node js relay and 2) a serverless function. Thanks for asking.
@@DaveGrayTeachesCode thanks for your quick response
Thanks you !!
I want this weather app tutorial...
Where can I find it?
Where can I find a tutorial on this app??
I need to make the tutorial. It is more complex than the average weather app, I am looking forward to making it when I can. Thanks for asking!
@@DaveGrayTeachesCode Sure I will be waiting for that. I am sure I will learn alot from it. I have learnt a lot from your videos.
thanks sir
@@darshaanaghicha8023 I am glad to hear it and happy to help. Thanks!
thats a great trick! love it
Glad I could help 💯
Thanks man this solved my problem
Glad it helped!
thanks for the video, but at the end you say it's a good way to hide the api key, but, you're showing it! sorry, I don't understand, it's not hidden, anyone who sniffs the code will be able to find it.
I said it is a good way to avoid putting a key in a GitHub repository and acknowledged there are other ways to hide the keys from your code entirely such as serverless or a backend relay. I plan to make videos on those methods as well. If you have a student project though, this method allows you to keep your key out of a GitHub repository and still use it for your project. Thanks for watching.
Thanks a lot!
You're welcome!
Now, what's the point of doing this? Anyone inspecting my source code from browser can now easily read and copy my api key and db configs....
If you use an API key in your frontend code at all, it can be seen through dev tools. As explained in the video, the point is not sending the key to GitHub. Especially for student projects. Want to keep it out of the frontend completely? Watch my video on setting up a relay: th-cam.com/video/uk9pviyvrtg/w-d-xo.html
I hadn't idea Burton C. Bell is a programmer
"Oh man....what's this github guardian email?...oh of course...I exposed the apikey so it's flagging me....time to search around for how I deal with this.....I bet it's gonna be hard to find someone with my exact situation....with github with netlify.....with a weather app....."
(Dave has entered the chat)
Thanks once again man.
You're welcome! 🚀
so after researching for hours and i got to a place to secure my api key but after all this damn api is still visible? Ridiculous😂
thanks for the tutorial btw
You're welcome - this works as a quick fix for student projects, but better solutions are here: th-cam.com/video/uk9pviyvrtg/w-d-xo.html and here: th-cam.com/video/J7RKx8f4Frs/w-d-xo.html
Someone trying to steal your api-key already knows where to look for it😂
If they want to specifically steal yours, but if want just want to keep it out of Github for a student project, personal project, etc. - this works. GitHub has bots crawling it for those keys.
really
Bad video because api key still gets shown in browser
I explained what this was for in the video. Search my channel for the API key relay. That is what you want.
Nice work again, I tried the .dotenv way on my project, but this was easier!
Glad it helped! 💯
this is not even hiding the api, the title is so misleading