I am building a website for some friends and myself. For this, I am fetching data from an API to display on the website. I have just built an HTML + CSS page and added a pure JS script and uploaded all three files to my file manager on my domain. The script runs every time the page is opened, and I add the script to fetch data like so:
<script type="text/javascript" src="script.js"></script>
Since what I'm building is very lightweight, how can I securely store the API key in the simplest way possible instead of having it hardcoded in my script?
I've tried placing a secret.js file in the root folder of my domain (one folder higher, outside the actual domain that will be accessed), but I am unable to read the API key from there, and I get this error in the console:
GET http://<my-domain>.com/secret.js net::ERR_ABORTED 404 (Not Found)
Despite trying to access it outside the domain folder with this statement in my HTML:
<script type="text/javascript" src="../secret.js"></script>
A solution similar to this would be preferred. I would like to avoid any third-party tools, packages, etc.
