DEV Community

loading...
Cover image for How to hide API KEY in GitHub repo

How to hide API KEY in GitHub repo

ptprashanttripathi profile image Pt. Prashant tripathi ・2 min read

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 data like API KEY, follow this guide to remove the sensitive info.

  • In the terminal, create a config.js file and open it up:
Code config.js
Enter fullscreen mode Exit fullscreen mode
  • 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:
var config = {
  MY_API_TOKEN : '12345',
  SECRET_API_KEY : '56789',
}
Enter fullscreen mode Exit fullscreen mode
  • In your HTML file, add a script link to this file BELOW your javascript but ABOVE your own script file links:
<script type='text/javascript' src='config.js'></script>
Enter fullscreen mode Exit fullscreen mode
  • In your javascript file (probably script.js), declare variables that point to your API keys in the config file like so. Note that the config here refers to the object called 'config', NOT to the file config.js:
var token = config.MY_API_TOKEN;
var key = config.SECRET_API_KEY;
Enter fullscreen mode Exit fullscreen mode
  • Be sure to replace every instance of the API keys with these new variables.
    E.g. if you had:
    url: 'https://www.your-api-host.com/?query&token=12345&key=56789'
    Now you will have:
    url: 'https://www.your-api-host.com/?query&id=' + token + '&pass=' + key

  • In the terminal create a .gitignore file and open in atom. Note the period at the start of the file name:

Code .gitignore
Enter fullscreen mode Exit fullscreen mode
  • In the .gitignore file, enter any file names that you want git NOT to track/commit/push. No other code is necessary. In this case you would enter:
config.js
Enter fullscreen mode Exit fullscreen mode
  • Type git st. You should see the .gitignore file ready to be tracked. You should NOT see the config.js file.

  • git add ., and git st again. Make sure the config.js file didn't get added. If everything looks good, you're ready
    to commit and push.

Discussion (19)

pic
Editor guide
Collapse
bradtaniguchi profile image
Brad

There's 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 api's 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
ptprashanttripathi profile image
Pt. Prashant tripathi Author

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
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 Author

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

Thread Thread
jaagrav profile image
Jaagrav

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 Author

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 Author

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
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

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 Author

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
monisnapjonathan profile image
Collapse
lakinduk profile image
Lakindu Kariyawasam

very useful technique. thanks