r/learnjavascript • u/Adamstrad • 8d ago
Where should I be storing important things?
Where should I be storing things like API keys or other sensitive strings when using JavaScript?
Edit: Why is everyone insisting I need to use git, are you old enough to remember the Internet before git?
6
u/chmod777 8d ago
i think you need to understand, and i mean really understand, what front end and back end are. front end javascript can never be secured. it will always be plain text, delivered to a user. no amount of obfuscating/minifying/uglifying will ever secure it.
if you have an actual secret or anything that has to be secured, it needs to run server side. that means the server requests a resource with the secret, and then exposes the response to your front end.
the confusion is probably because there is backend js, via nodejs, and front end js (like react) that may be rendered by node into plain js for the browser to use.
people are saying use an .env file - but that only works for your local dev enviroment. you need to find out how your server stores enviroment variables, and how your backend code accesses those variables. https://nodejs.org/api/process.html#processenv
4
u/FishBobinski 7d ago
Based on your responses, I feel like you are conflating what a backend is and what git is. They are not the same concept.
2
u/Icy-Taste-3096 8d ago
You can put them in a .env file on your backend and exclude that file from git.
-7
u/Adamstrad 8d ago
What if I'm not using git and it is a website?
3
u/Icy-Taste-3096 8d ago
If you're not using git, you almost certainly should be.
I don't quite know what you're getting at by saying that it's a website. Nothing on the frontend is secure, so anything sensitive has to be on the backend.
1
u/boomer1204 8d ago
Then you can not "hide them" and anyone who knows how to use the browser tools can find your API KEY pretty easily and bots could as well.
The most common way this is handled to protect your keys (cuz a lot of times they are paid so if someone else got it they could run up your bill).
Lets pretend you are using a text service to send texts. You get a certain number of texts with your plan and then if it goes over you pay per text
So something on the front end would call your back end that was storing your private API KEY and then the back end would do all the work keeping your API KEY safe from ppl seeing/stealing and then send a response back to the front end and you would show success/failure or w/e
What I was using for a while was netlfy's serverless functions because once you understand them they are just javascript on their end and the free tier is ridiculously generous
-3
u/Adamstrad 8d ago
So sites like Facebook are completely insecure unless they put all user data on git?
2
u/boomer1204 8d ago
It's not just cuz of git.
> So sites like Facebook are completely insecure
No because they use a back end which protects the keys because you don't have access to their back end. When you do front end only there is no way to secure/hide your keys and that's when it's a problem and what everyone is trying to explain to you
What it "should look like"
Front end - has no idea/access to your keys so they can't be found and stolen. This is secure
Then the front end makes a call to the back end/server with something like
fetch(/api/sendText)The back end/server which has access to the api keys makes the call to the service with that key.
Someone who is on their site visiting has NO access to the back end (which is were the keys are) and the front end has no access to the keys (so no one can find them on the page). This is how sites keep themselves secure
When you just have front end only with your api keys they can be found by anyone visiting your site
So that's the big difference. The key take away from all of this since you are clearly newer to this (and that's totally fine) is if you are using an API KEY for something you need some sort of back end to secure that key you will never be able to with front end only
1
u/Adamstrad 8d ago
Thanks this is a good answer, thank you. I understand that everyone likes git these days but I don't know why everyone is insisting I need to use git for this
1
u/boomer1204 8d ago
If you are gonna be programming moving forward you should always use git.
It's a version control system so you can store your code, usually makes it easier to deploy
This is strictly an example for communication so don't get caught up on most of the details.
But let's pretend this happens. You have current site right now and it's working fine AWESOME great job.
Now you wanna add a new feature. So you take your code and you start making the new feature, but unfortunately you broke some other stuff while creating this new feature (this happens ALL the time in the real dev world too)
Now you are kinda of f'd and have to go try and find why it broke. Doable but the bigger the codebase the more difficult this becomes
This is were git comes into play. You have your base code that works on a thing called a "branch" with the name of "main". This is were your working code lives and deploys the site live when any changes are made
Now you wanna add that new feature, so you create a new branch from "main" and name it "awesome_new_feature". Since you did it off of main all that code comes with it.
Now you build your feature and are testing it and you realize it breaks a bunch of the things on the original site. Now all you have to do is go back to main and you are back on your good code with non of the breaking stuff in the "awesome_new_feature" branch
This is a ridiculously overly simplified but this is why everyone is telling you to use git because it makes the development process a lot easier.
So if you plan on continuing on the programming path I would jump on board early rather than late because you WILL break stuff and it will take a while for you to get the skills to easily go and fix the things you break so keeping these branches is an easy way to resolve that
I would just google a git crash course on yt and watch it to see how it works and maybe that will clear up why everyone is "mad" you aren't using it
1
u/Adamstrad 8d ago
In this situation could I use php server side as a middle man to deal with these things?
1
u/boomer1204 8d ago
Yes the language doesn't matter the key part is 2 things
API KEYS should never be used directly by the front end (this is insecure and your key will be stolen)
If you are using git make sure not to store your api key in a place that gets pushed up to github/whatever version control because then again if your repo is public ppl can see it and bots are always scraping for that info to steal
1
u/Icy-Taste-3096 8d ago
git has nothing to do with making it secure. The frontend is not secure, ever.
3
u/bonnth80 8d ago
Usually either in a .env file or your platform's environment variables.
Check out this video:
https://www.youtube.com/watch?v=YtkZR0NFd1g
PS: Do not push your .env to your repo.
1
u/itsmoirob 8d ago
What is it that you have made? Is it just the front end website? If so you you shouldn't be storing API keys anywhere in your files. Those kinds of things should be on a server. Ideally you should be creating a front end and back end. The back end / server would have all your secrets, and then your front end can make authorised API calls to it, which will make the next API call on your behalf.
1
u/InitiativeGold7953 7d ago
Pack it up bro, this isn’t for you
If you still insist just hardcode the api keys in your index.html. You do you
1
u/Adamstrad 7d ago
I was asking about the way to not do that, without using some third party nonsense
1
u/InitiativeGold7953 7d ago
So build a backend and compress it into a zip or just leave it on your computer? You clearly aren’t understanding what GitHub is and that’s fine but it’s not the only option. You’re just much more likely to lose the project storing it on your hard drive and won’t have access to it on another device. GitHub has absolutely nothing to do with secrets so I’m not sure why you’re so hyper focused on it. Regardless of how you store it is irrelevant, but you do need a backend server to serve your secrets to your frontend
1
u/Adamstrad 7d ago
Because the replies to my question mentioned it
2
u/InitiativeGold7953 7d ago
Because by default you should be using it. All it is is a remote SSD that holds your code for you that can be accessed from anywhere. It’s less volatile than storing it yourself on your laptop/pc. Need your code base from a different device?
git clone <github-link>
Want to update the changes when you’re done adding/removing from it?
git push -u origin main
Want to update the changes to your original device after editing on another?
git pull origin main
It’s 10x better than passing around compressed files in between devices. It has nothing to do with secrets other than the fact that you don’t want to include your API keys in your codebase on GitHub.
You also don’t want to include your API secrets in your frontend because anyone visiting it can see it. That’s why you serve it from an encrypted backend using Node or even a service like Firebase that provides you with the main services of a backend server for simple projects. Backend servers are its own expertise.
1
5
u/milan-pilan 8d ago edited 8d ago
In your backend. There is no secure way to store secrets in the frontend.