Skip to content

Instantly share code, notes, and snippets.

Embed
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: https://help.github.com/articles/remove-sensitive-data/
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//www.whatever.com/?query&sig=12345'
Now you will have:
url: 'https://www.whatever.com/?query&sig=' + 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:
config.js
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

This comment has been minimized.

Copy link

@bkrall 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?

@ericjenkinson

This comment has been minimized.

Copy link

@ericjenkinson ericjenkinson commented Jan 2, 2017

@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 README.md should have notice informing the user of the hidden API key and how to recreate the file.

@ayunav

This comment has been minimized.

Copy link

@ayunav ayunav commented Jan 6, 2017

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

@niko79542

This comment has been minimized.

Copy link

@niko79542 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.

@LosEagle

This comment has been minimized.

Copy link

@LosEagle LosEagle commented May 12, 2017

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.

@brianAround

This comment has been minimized.

Copy link

@brianAround brianAround commented Jun 23, 2017

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

This comment has been minimized.

Copy link

@gentlefox 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;

Alternatively:

    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.

@MurphyPicard

This comment has been minimized.

Copy link

@MurphyPicard MurphyPicard commented Sep 5, 2017

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

@briancodes

This comment has been minimized.

Copy link

@briancodes briancodes commented Oct 8, 2017

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

@yoobin2486

This comment has been minimized.

Copy link

@yoobin2486 yoobin2486 commented May 24, 2018

You have to fix the 23rd line. <script type='text/javascript' src='script.js> -> <script type='text/javascript' src='script.js'>

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jun 25, 2018

@briancodes Yes, you are correct. Instead I would call config.js through your back-end program so none of the sensitive data is exposed. Any API keys that are designed to be coded onto a .html file according to the api's documentation are safe to display to the public. 😄

@pnambu002c

This comment has been minimized.

Copy link

@pnambu002c pnambu002c commented Aug 17, 2018

@derzorngottes I am sorry looks like i am missing something. I am not sure if there is a command git st. And also I still see config file after i gave the file name in .gitgnore. Can someone help me?

@dan3lson

This comment has been minimized.

Copy link

@dan3lson dan3lson commented Aug 29, 2018

@pnambu002c Try typing out git status to see which files are ready to be committed and which files are ignored with that .gitignore file. If you see that the config.js file is being untracked, you should be good to go.

@ArsalanEtehad

This comment has been minimized.

Copy link

@ArsalanEtehad ArsalanEtehad commented Oct 31, 2018

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.

Hey! I'm not sure I got your point. So there is no point to hide the API_Key if the website will be assessable by others?

@rish-16

This comment has been minimized.

Copy link

@rish-16 rish-16 commented Dec 14, 2018

If I deploy a page on gh-pages and I have API keys in a config file, how can I hide the config file and at the same time, have them used in the website?
Currently, the website says that it cannot recognise the API key variables because it cannot find any file called config.js.
Can someone help me?

@Chibuikekenneth

This comment has been minimized.

Copy link

@Chibuikekenneth Chibuikekenneth commented Dec 20, 2018

Thank you

@alexw858

This comment has been minimized.

Copy link

@alexw858 alexw858 commented Mar 7, 2019

If I deploy a page on gh-pages and I have API keys in a config file, how can I hide the config file and at the same time, have them used in the website?
Currently, the website says that it cannot recognise the API key variables because it cannot find any file called config.js.
Can someone help me?

I was just having this same issue, but then I realized: if my gh-pages site needs an API key and its being used in the website, that's essentially the same thing as sharing my API key openly (since the site uses it each time the site loads). If I'm wrong someone please correct me!

@CorneliuPopescu

This comment has been minimized.

Copy link

@CorneliuPopescu CorneliuPopescu commented Mar 8, 2019

Very useful, thanks!

@Rod911

This comment has been minimized.

Copy link

@Rod911 Rod911 commented Jun 27, 2019

If I deploy a page on gh-pages and I have API keys in a config file, how can I hide the config file and at the same time, have them used in the website?
Currently, the website says that it cannot recognise the API key variables because it cannot find any file called config.js.
Can someone help me?

need help with this

@8badthoughts

This comment has been minimized.

Copy link

@8badthoughts 8badthoughts commented Dec 24, 2019

it worked

@oliverjam

This comment has been minimized.

Copy link

@oliverjam oliverjam commented Mar 12, 2020

For everyone who is confused:

If you are deploying a frontend-only application you cannot hide anything from your deployed site.

If your code needs to access a value to make an API request that value will be visible in the browser's dev tools to any user who feels like checking. Any API request you make will be visible in the Network tab and will show the full URL and any headers, which will expose the key.

Using the method in the gist above will stop your key being pushed to GitHub, but you cannot deploy your app without including the key. The only way to hide it is to proxy your request through your own server. Netlify Functions are a free way to add some simple backend code to a frontend app.

@hannahlivnat

This comment has been minimized.

Copy link

@hannahlivnat hannahlivnat commented May 20, 2020

Thank you, this is very helpful!

@jimDragon

This comment has been minimized.

Copy link

@jimDragon jimDragon commented Jul 22, 2020

What if i want to hide the key inside <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script> ?

@sathiyaseelan253

This comment has been minimized.

Copy link

@sathiyaseelan253 sathiyaseelan253 commented Aug 10, 2020

Thank you, Helpful.

@oreillyalan

This comment has been minimized.

Copy link

@oreillyalan oreillyalan commented Aug 22, 2020

You are a superstar for this. Helped me immensely working through some college work! Thanks very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.