Question About API Keys

I’m building my weather app using git and Github. How do you go about securely storing your API on Github. I tried searching for info, and using a config.js file within a .gitignore file to store the key, but I keep getting a GET request error. Any suggestions, I know this is a little beyond the scope of this project but I would really like to know how this should be done. Thanks!

You can’t hide the api key on a front-end project. Normally, you get the information on the back-end, and thus your key is private. Like you said, if you put your code on github, usually you can use a git ignore and config file. But with a front-end project and client-side javascript, you can’t do this. On client-side javascript you can’t load a hidden file, and your scripts will always be available to the public (you can right-click, view source on Chrome), even if you don’t put it on GitHub.

1 Like

Take a look at this article.

Accidental API Key Exposure is a Major Problem
https://rosspenman.com/api-key-exposure

2 Likes

Thanks for the reply. I was just reading an article about how using gitignore will not work on the client side, and i experienced that this morning. So what are the options then, most apis I have looked at have in there terms of service to not use your api key in any public domain.

If you didn’t read @jamesperrin post above, read it, its very good.

Here are several things I have seen other campers do that can’t make a back-end server.

  1. Find a different api that does not need a key
  2. Ignore it, and do it anyway at your own risk. (My project actually is like this. I did not know not to do that, and I have never gone back and fixed it…)
  3. Hard-code the data yourself. Example instead of getting the JSON from an api, just write a JSON file yourself that looks the same, and in your project state that the data is hard-coded.
  4. Just skip over the weather project, twitch project, etc. since they will be optional hopefully before next year.
1 Like

I would like to add, at work we have a private Git server where we check in our code.

So, to handle sensitive information we use a .gitignore file. Anything that is sensitive is placed in a file with the name beginning or ending with “private” or “secret”. Then, in .gitignore, we have a rule to skip over anything beginning with those two words. Anything that is OK to be checked can begin with the words “public”. The pubilc file will have an indication how to form the private file.

Examples:

.gitignore
[Pp]rivate*
*[Pp]rivate
[Ss]ecret*
*[Ss]ecret

private-api-key.config
ApiKey = 123abc

public-api-key.config
ApiKey = <EnterApiKey>

1 Like

As others have mentioned the bare minimum you should do is keep your keys in a .gitignored file. A popular Node module for this is dotenv. You put environmental variables in an .env file and read from it on app start/code compilation.

The problem is - if you’re hosting your code as a front end project somewhere, your API keys will still be inside there somewhere. To however strongly obfuscate them in that case you can use something like node-cipher or Node’s Crypto module.

But even then a user can simply open the Network panel in the Developer Console and have a look at the requests the page makes. All your keys will be there, be it in the uri or in the body.

The take-away is - there is no secure way to make API requests from the client. For sensitive information - pass it through your own backend.

2 Likes

James thanks for sharing the post :+1:

Code pen seems to have a solution worked out now

Having said that I am not succeeding in accessing local.storage


var storage = (function() {
	var dataStore = "testklsadjfkads";
	var result;
	try {
		localStorage.setItem("dataStore", dataStore);
		result = localStorage.getItem(dataStore) == dataStore;
		
		return result + document.write(result, " ", window.localStorage.getItem(dataStore));
	} catch (exception) {
    return false + document.write("false");}
}());

Easy fix, difficult spot. You were missing the double quotes in this line. Below code works.

result = localStorage.getItem("dataStore") == dataStore;

Correction

var storage = (function() {
	var dataStore = "testklsadjfkads";
	var result;
	try {
		localStorage.setItem("dataStore", dataStore);
		result = localStorage.getItem("dataStore") == dataStore;
		
		return result + document.write(result, " ", window.localStorage.getItem(dataStore));
	} catch (exception) {
    return false + document.write("false");}
}());

CodePen’s take on the security of this approach (using browser local storage) is total rubbish. Anyone can clearly see the API key being sent by simply inspecting the requests their browser makes using the built-in debugging tools. Plus, to store the API key in localstorage in the first place, you need to write javascript that contains, guess what, the API key.

Storing the API key in the backend is the only way to secure it.

CodePen’s solution is a quick and dirty way of providing an API Key. The code is supposed to prompt for the API key, then stores it locally for easy testing. This way you can use an API without needing server side code and not exposing the key.