DEV Community

Cover image for How to hide API KEY in GitHub repo

How to hide API KEY in GitHub repo

Pt. Prashant tripathi on October 27, 2020

How to hide API keys in github repo If you have going to push your local code on GitHub, so it is a best practice to hide your sensitive...
Collapse
 
bradtaniguchi profile image
Brad • Edited

There are 2 things glossed over here that should be pointed out to prevent developers looking for help finding this and thinking this makes their code secure.

  1. If you already commited your secrets to git and pushed, they are basically already exposed via the history and can be considered compromised just as much as if you directly commited them directly to the source and left them there.

  2. If your saving api keys on the client-side, they aren't "hidden" in production due to all JS code being insecure, where anyone can go read/find the keys via the dev-tools.

Most apis that support directly calling from the client-side usually have some protection to prevent abuse since they are essentially just "floating out there" on the client side. Those that don't should really just be called via server-side code. Anything else you do (like the advice above) will only make things less convenient to malicious attacks but isn't actually making things hidden, which is basically impossible for client-side api keys.

Collapse
 
shashankojhabot profile image
Shashank Ojha

Hey @bradtaniguchi the 1st point that you have mentioned is for the case when someone has already pushed the code to github without adding the .js file (containing api keys) to .gitignore, right?

How is the security compromised in this case? because as far as I understand if I add any file to .gitignore it wouldn't be committed to github so if anyone clones the repo he wouldn't have that config.gs file (where all the api keys are present). Correct me if I'm wrong

Collapse
 
bradtaniguchi profile image
Brad • Edited

How is the security compromised in this case?

The reason your keys are compromised is even if after you realized you pushed your secrets, and you perform these changes mentioned to remove them from your workspace, your secrets still live in your repo's history. So someone can just go back in-time to your commit to get the secrets you committed. Your only options are to force change the history to make it seem like it never happened, and even then github might still have the reference to this code at some level.

Or even if you did everything right and cleared up your repos history and github isn't hiding anything, no one said someone didn't just clone/copy/get the keys you committed in the time it was exposed.

as far as I understand if I add any file to .gitignore it wouldn't be committed to github so if anyone clones the repo he wouldn't have that config.js file (where all the api keys are present)

This prevents the 1st scenario I'm talking about, but the 1st scenario should be addressed at some point since its so common. The 1st scenario being you forgot to .gitignore your secrets and uploaded them. Github currently has a bunch of built in security features that will point out compromised keys automatically, which can help at least alert you you did something wrong.

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi

We can also restrict user from accessing config.js by using few line in .htaccess

Collapse
 
sphrases profile image
sphrases

I think htacces is considered insecure and the file can still be read through js

Thread Thread
 
ptprashanttripathi profile image
Pt. Prashant tripathi • Edited

ok

Collapse
 
jaagrav profile image
Jaagrav

Let's say I am using netlify functions, and I made the repo public on Github, is there any way to hide my APIs, because I don't want to make my repo private.

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi

Use .env varibal and add .env in .gitignore file

Thread Thread
 
jaagrav profile image
Jaagrav • Edited

But what the website and the functions are fed directly from the github repo to Netlify... Will it still work in that case?

Thread Thread
 
ptprashanttripathi profile image
Pt. Prashant tripathi

Yes you just have to setup environment variables in netlify Also
To do so read official documentation

👉 Netlify Docs📗

Collapse
 
atapas profile image
Tapas Adhikary

Hi Prashant,

This is a cool technique.

I use the dotenv package(npmjs.com/package/dotenv) and .env file to do the same. Have you explored it too?

Collapse
 
sphrases profile image
sphrases

Came here to recommend it. Environment variables are the common way of handling secure strings

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi

Yupp, but this is simple

Thread Thread
 
aboutdavid profile image
David

In my opinion, Security > Simplicity because well, your (users) security matter.

Thread Thread
 
ptprashanttripathi profile image
Pt. Prashant tripathi

hmm

Collapse
 
mary_white profile image
Mary White

I have been using a middleware tool to secure my API Keys then placing the public URL that's created into my code. This seems to be a 2 birds with one stone kind of situation, as my API secrets are not exposed in my repo nor on my frontend. I find this KOR connect tool to work really well for my projects where I need to secure a private API Key, don't want user authentication, and want to get it done quickly. They claim to also prevent bot attacks and prevent non origin calls. It's also free, which is a bonus. Here is a blog I found this weekend and followed: dev.to/korconnect/secure-api-keys-... .

Hope this also helps.

Collapse
 
xavierbrinonecs profile image
Xavier Brinon

One should not reinvent the wheel 🦄🙏🏻 : npmjs.com/package/dotenv
As a rule: do not 🙅🏻‍♂️ write any secret in clear in any file used in Front End side of your application. A good read: blog.gitguardian.com/secrets-api-m...

Collapse
 
ebislab profile image
ebisLab • Edited

those who are recommending the .dotenv way, is this method good for vanilla html/css/js file structure
because it seems that you have to have a whole node.js set up

Collapse
 
lifeofmadman1 profile image
lifeofmadman

why not to use .env , what makes your approach unique and better than .env?

Collapse
 
ptprashanttripathi profile image
Pt. Prashant tripathi • Edited

Why people can't understand the fact everyone is not born experts, all of us had used different approaches at different points of our learning path, just for understanding the logical.

I don't remember who said this that

You have to walk before you can run.

So moral of the story to learn the basics before trying to do something more advanced.

Have a Good day☘️

Collapse
 
rohitgulam profile image
Rohit Gulam

This way worked for me. I tried using dotenv but a reference error is raised saying that the 'require' keyword is not defined. I did a little research and I found out that require keyword is not known by the browser and can't be used with vanilla JS

Collapse
 
nabeelahmed1699 profile image
Nabeel Ahmed Mufti • Edited

In the config file, enter your API keys in an object like so (naming them whatever you like, and putting the keys in as strings). You don't need any other code in this file: I didn't get the meaning of this part correctly please explain it a little more

Collapse
 
monisnapjonathan profile image
Jonathan BROSSARD
Collapse
 
lakinduk profile image
Lakindu Kariyawasam

very useful technique. thanks

Collapse
 
amitgurbani profile image
Amit Gurbani

Those who are concerned about vanilla js project. Refer freecodecamp.org/news/how-to-use-e... without node.js setup.