Accessing GitHub secrets in Javascript

Question

I have a webpage I made as a school project that interacts with an API. Currently, the API key is saved in the JavaScript file, which, I realize, is a security risk. I stored the value in a GitHub secret; I have a rough idea of how to make it an environment variable using GitHub workflows, but absolutely no idea how to access it in the JavaScript afterwards. How do I do so?

The project is entirely front-end and built with plain JavaScript (and jQuery, granted); I have no idea how to do any backend stuff more complicated than the API calls themselves.

Answer 1

There is unfortunately not much point in using GitHub Actions' secrets here for security - for keeping the token out of source control, so it's not immediately visible for anyone just browsing your code, sure, but beyond that:

If your project is frontend only, the API key will need to be somewhere in the code served to the user's browser.

Even if you'd obfuscate it somehow, they'd be able to use the browser's network inspector to see the API key.