Question About API Keys

Question About API Keys
0.0 0

#1

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!


#2

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.


#3

Take a look at this article.

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


#4

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.


#5

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.

#6

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 “.gitignore”.
Anything that is sensitive is placed in a file with the name beginning with “private” or “secret”.
Then, in .gitignore, 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:
private.config*
secret.config*
ApiKey = 123abc

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


#7

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.


#8

James thanks for sharing the post :+1:


#9

Code pen seems to have a solution worked out now


#10

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");}
}());