Skip to content

Instantly share code, notes, and snippets.

@derzorngottes
Last active September 21, 2024 05:45
Show Gist options
  • Save derzorngottes/3b57edc1f996dddcab25 to your computer and use it in GitHub Desktop.
Save derzorngottes/3b57edc1f996dddcab25 to your computer and use it in GitHub Desktop.
## 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.
@MurphyPicard
Copy link

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

@briancodes
Copy link

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

@reyoobin25
Copy link

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

Copy link

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

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

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.

@4rsal
Copy link

4rsal 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
Copy link

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

Thank you

@alexw858
Copy link

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

Very useful, thanks!

@Rod911
Copy link

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

Copy link

ghost commented Dec 24, 2019

it worked

@oliverjam
Copy link

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.

Copy link

ghost commented May 20, 2020

Thank you, this is very helpful!

@dimpram
Copy link

dimpram 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
Copy link

Thank you, Helpful.

@oreillyalan
Copy link

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

@CliftonHill
Copy link

Adding on to what @oliverjam said: deploying via gh-pages is all Front End. The only way to hide code is to use the Back End to serve content to the client (front end) without actually exposing the API_KEY. I'm not sure how Netlify functions works, but I would assume it uses a back end in some way. There is also Heroku and other services that are free to use on a limited basis. The OP Readme is focused on explaining how to keep the API from the public, but what they would have done next that isn't discussed in the Readme is they may share that hidden config.js file with their team by email.

@asyr01
Copy link

asyr01 commented Nov 22, 2020

Thanks for the idea.

@Namyalg
Copy link

Namyalg commented Feb 5, 2021

Extremely helpful piece of code

@shay122990
Copy link

this is really helpful, but how do i deploy that with heroku. Im not sure that Heroku can fetch .gitignore files. can someone help please

@hortencia718
Copy link

this did not work for me , my error is. Failed to load resource: the server responded with a status of 405 () when trying to send a email on the form . any help will help , am deploying on heroku and testing locally before making my commits and its not working locally
also before i send the form i get the message that "config is not defined "? i did all the above ? thanks for any help

@bbotezatu
Copy link

I'm pretty sure (at least with Github pages sites) that this doesn't help with hiding the API key, since client can just open devtools and view the key that way

@jjsilas
Copy link

jjsilas commented Jun 9, 2021

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.

Thanks for clearing that all up!!

@AyoCodess
Copy link

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.

thank you!

@wonjong2
Copy link

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.

Thank you

@nathanpuls
Copy link

Can you explain in most straightforward words how to and where to hide my API key.. I have just started coding and am struggling. I am building a front-end website hosted on GitHub and want to hide the code and API keys required. Is there any other way then upgrading my GitHub plan?

Sounds like netlify functions posted earlier.

@CGFS93
Copy link

CGFS93 commented Nov 12, 2023

Thank you for this info. Im running into an issue and it could be user error. my apikey isnt working in github pages once I commited the .gitignore. if anyone knows how i could fix this issues please let me know.

@Dipta-Sarker
Copy link

Awesome article.

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