Short answer: usually no, and the common "fixes" do not work. Three things people try that fail: (1) hard-coding the key in HTML/React - visible in the source and the DevTools Network tab; (2) a VITE_ or REACT_APP_ prefixed env variable - that prefix bundles the value straight into the JavaScript that ships to the browser, so it is sitting in a downloadable JS file; (3) a non-prefixed "secret" variable but still calling the API from the frontend - the variable stays server-side, but when the fetch fires, the key shows up in the request's Authorization header in the Network tab. The rule: if the API call happens in the browser, the key is visible, no matter how you stored it.
What works: move both the variable and the call to the server, into a serverless function. On Vercel, drop a JS file in an /api folder - that is a mini backend that never runs in the browser. Your frontend calls /api/your-function; the function reads the secret and makes the real downstream call. The browser only ever sees the call to your own function - the keyed request is invisible.
Full walkthrough with code: https://www.tigzig.com/post/your-api-key-is-visible-in-the-browser. Related: the security checklist for web apps https://www.tigzig.com/agents-faq/security-checklist-for-web-apps.
← All Agents FAQ