Github projects and API Keys

How to build a website with an API key stored on Github?

disclaimer: I really don’t know much about security issues, so please excuse me if I misspeak or clearly don’t understand something others’ may think is obvious.


I have been practicing GET requests with a NASA API. In my basic level of understanding, I hard-coded the API key into the script.js file. I know it’s horrible from a security standpoint, but the worst that would happen if my API key gets ou, is they max out the requests and my API key gets shut off. However, I want to build my project with secure features using good coding practices. I also want people to use it as easily as possible.

What I have done:

I have read documentation on StackExchange that suggests using third-party packages, using NodeJS to get it off client-side, and moving it to a .env file and placing the .env in a .gitignore file. However, all the articles I have read say that if you do, you need to explain in the file, that you need to explain that they would need to obtain a new API key to place in their own config file. I may sound ignorant, but from a UX standpoint it seems ridiculous to make anyone go through that trouble to

I have also tried to read up on Github security. I know you can change the repository visibility, I read a little about secrets, disabling Github actions, and even about using a git-remote gcrypt . Basically, I’m so new to anything security none of these make sense and I’m not sure which way to even start.

So which option should I use?:

  • THIRD-PARTY PACKAGES Honestly, the project is not big enough to take multiple hours learning how to integrate a third-party package. So I’m just not interested in this option.

  • NODEJS TO MOVE IT OFF CLIENT SIDE I have enough interest in NodeJS that this may be an option, but again, the project isn’t big enough to jump to this yet. But maybe willing to explore this option if needed.

  • MOVING THE VARIABLE TO A .ENV FILE AND THEN USING .GITIGNORE : While this isn’t a complete solution, this seems like the most appropriate to me. However, if I’m using a .gitignore, then will that make it so my website will only work on my local computer? If so, that defeats the whole point of an easily accessible portfolio project because no prospective employer would take the time to set up their own .config files with their own API Keys.

  • REPOSITORY VISIBILITY: I want people to see my repository, because these are going to be portfolio projects, so shouldn’t I keep my repository visible?

  • DISABLING GITHUB ACTIONS: From what I was reading these seem more like setting up automated actions, which wouldn’t apply in this case, right?

  • GITHUB SECRETS : These seemed to have promise in their description of “encrypted environment variables” but then they immediately say they are accessed through workflows:

Secrets are encrypted environment variables that you create in an organization, repository, or repository environment. The secrets that you create are available to use in GitHub Actions workflows.

And since I’m not automating a workflow, would that mean this is a wrong use case?

  • USING git-remote gcrypt : is this overkill?

Please help. I understand if you may not have time to explain all of these concepts, but even a few nudges to help me know which ideas are applicable and worth studying more and which ones aren’t would be helpful.

Thanks in advance,

T. Rapp

Yes, that’s the appropriate solution, and yes, it’ll only work where you provide the key.

As a prospective employer I’d want to hire people who follow good security practices, so publishing API keys would probably defeat the purpose, too. :wink:

If you want to set up a website that demonstrates what you can do, your best choice might be to use a web host where you can run an application server-side, so there’s no need to send your API key to clients.

1 Like