Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
## How to hide API keys from github ##
1. If you have already pushed commits with sensitive data, follow this guide to remove the sensitive info while
retaining your commits:
2. In the terminal, create a config.js file and open it up:
touch config.js
atom config.js
3. 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_KEY : '123456',
SECRET_KEY : '56789',
KEY_2 : '101010'
4. In your HTML file, add a script link to this file BELOW your jQuery script but ABOVE your own script file links:
<script type='text/javascript' src='config.js'></script>
<script type='text/javascript' src='script.js></script>
5. In your javascript/jquery 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 mykey = config.MY_KEY;
var secretkey = config.SECRET_KEY;
6. Be sure to replace every instance of the API keys with these new variables.
E.g. if you had:
url: 'https//'
Now you will have:
url: '' + mykey
7. In the terminal create a .gitignore file and open in atom. Note the period at the start of the file name:
touch .gitignore
atom .gitignore
8. 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:
9. Type git st. You should see the .gitignore file ready to be tracked. You should NOT see the config.js file.
10. 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.

bkrall commented Dec 1, 2016

Think I'm missing something, when you deploy, how is this file accessed when it's not in version control?

@bkrall: The file would have to be recreated manually. The intent of the instructions is to hide an API key used in code hosted on github that is open to the public. The should have notice informing the user of the hidden API key and how to recreate the file.

ayunav commented Jan 6, 2017

@derzorngottes: This is awesome and super helpful! Thanks so much for posting this!

niko79542 commented Mar 12, 2017

.Gitignoring will hide key from github, but should we be worried about making API call from JavaScript. Is it the key vulnerable? Or is that not something to worry about for a small JavaScript app.

This would be great if every single user of your app didn't have to generate his own api key and add it to config file.

If you want to share your API key to the world... then don't bother hiding it. With some services this sounds like a good way to get your API key disabled.

gentlefox commented Aug 3, 2017

Reference config.js from your user directory - such as ~/.ssh/webassets.js, which allows everyone in a team to have the same configuration while potentially having distinctly unique values for each of the variables.

A third-party way of setting all this up is to use dotenv.
The developers are Followers of the 12-Factor App

When it comes to deployment, you can apply all these values as part of your CI process (Settings > Environment Variables).
Assigning these values would then be as:

    var mykey = process.env.MY_KEY || config.MY_KEY;
    var secretkey = process.env.SECRET_KEY || config.SECRET_KEY;


    var mykey = 'some-default-string';
    var env = process.env.NODE_ENV || 'development';

    if (env === 'development') {
        mykey = config.MY_KEY;
    if (env === 'production') {
        mykey = process.env.MY_KEY;

EDIT: 12 Factor + dotenv references add.

@derzorngottes: This is awesome and super helpful! Thanks so much for posting this!

Wouldn't browser users have access to the config variables via DevTools when the web app is deployed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment