I’m building a dashboard that uses several APIs to show off my skills. But I’m stuck on how to keep the API keys safe when I put the project on GitHub Pages. I know there’s a way to do it with the command line, but I’m not great with that. Are there any other options?
I’m also wondering what could go wrong if I don’t hide the keys. Will people still be able to see my code if I share it?
Update: Thanks for all the helpful advice! Here’s what I’m planning to do:
- I’ve already made new API keys and haven’t put them on GitHub.
- I’ll try using GitHub secrets to keep the page working and secure when I share it.
- I might also check out Netlify, which a lot of people suggested.
- I’m thinking about making another version using PHPmyAdmin to store the keys and get them with PHP. I’m not super familiar with servers and hosting, so this is new territory for me.
If anyone has thoughts on these plans, I’d love to hear them!
hey avamtz, i think enviroment variables is a good option. they r easy to set up and help mute accidental exposure of keys. netlify works well too. don’t risk anything since exposed keys may bring unwanted bill charges and abuse.
yo avamtz, have u considered using a serverless function? places like vercel or netlify offer em. u can hide ur keys there n make API calls without exposin anything. its pretty simple to set up n keeps ur stuff safe. just make sure u dont accidentally commit any keys to github, cuz that can lead to some nasty surprises!
Regarding your update, your plan sounds solid. Using GitHub secrets is a good approach for securing API keys. They’re encrypted and only accessible during GitHub Actions workflows, which adds an extra layer of security.
As for using PHPmyAdmin and PHP, while it’s a viable option, it might be more complex than necessary for your use case. If you’re not familiar with server-side programming, it could introduce more potential security risks.
Have you considered using a static site generator like Jekyll or Hugo? They work well with GitHub Pages and can help you separate your sensitive data from your public code. You could keep your API keys in a separate config file that’s not committed to the repository.
Remember, the key is to never expose your credentials in your public repository, regardless of the method you choose. Good luck with your project!
I’ve been in your shoes, and it’s definitely a tricky situation. One solution that worked well for me was using a service like Heroku to host a simple backend. It’s pretty straightforward to set up, even if you’re not super comfortable with the command line.
Here’s what I did: I created a basic Express server that handled the API calls and stored the keys as config vars in Heroku. Then, my frontend (hosted on GitHub Pages) would make requests to this Heroku app instead of directly to the APIs. It took a bit of learning, but it was worth it for the peace of mind.
As for the risks of exposing keys, it’s no joke. I once accidentally pushed a key to a public repo, and within hours, someone had used it to rack up hundreds of dollars in API charges. Learned that lesson the hard way!
Securing API keys is crucial, especially when hosting on GitHub Pages. One approach I’ve found effective is using a backend proxy. Essentially, you’d set up a small server (maybe using Node.js or Python) that handles API requests and stores your keys securely. Your frontend code would then call this proxy instead of directly accessing the APIs. This way, your keys never appear in your public GitHub repo. It’s a bit more work initially, but it offers solid security and flexibility. As for potential risks of exposing keys, it could lead to unauthorized usage, potential financial charges, and even compromised data. Always err on the side of caution when it comes to API credentials.