API Proxy - archcoder-jd/Fadeout GitHub Wiki
API Proxy
The problem
Anything in browser JavaScript can be read by visitors. Opening the browser's developer tools shows every request a page makes, including any API key inside it. Removing the key from the repo isn't enough if the browser still sends it to TMDB.
The solution
Fadeout never talks to TMDB from the browser. It talks to its own server, and the server talks to TMDB.
Browser → /api/tmdb/trending/movie/day → Node.js proxy → TMDB
(adds the key)
How a request flows
- The front end requests data from its own domain, for example
/api/tmdb/movie/603?language=en-US. In the code,BASE_URLis set to/api/tmdb/. server/app.jsreceives it and:- accepts only
GETrequests - removes any
api_keythe browser sent - checks the path against an allow-list
- accepts only
- It forwards the request to
https://api.themoviedb.org/3/...with the key in anAuthorization: Bearerheader. - It returns TMDB's response to the browser unchanged.
Where the key lives
The key is stored in the TMDB_TOKEN environment variable:
- On the server: set in cPanel's Node.js app manager
- On your computer: in a
.envfile, which.gitignorekeeps out of the repo
The repository only ever contains the variable's name, never the key.
The allow-list
Only these TMDB sections can be requested through the proxy:
/movie, /tv, /search, /trending, /genre, /discover, /person, /configuration
Anything else gets {"error":"Not allowed"}. This stops other people from using the proxy as free access to the rest of TMDB's API on Fadeout's quota. Paths containing .. are also rejected.
Which token to use
Use the API Read Access Token from your TMDB account (Settings → API), the long one starting with eyJ. The shorter API Key doesn't work with a Bearer header and returns Invalid API key.
Adding another API
The same pattern will protect the AI features on the Roadmap: a new environment variable for the key, and a new route in the proxy. The key never goes in the front-end code.