CyberCertPrepWeb App FundamentalsFront-end vs Back-endEASYFree question
A developer uses Vite's 'import.meta.env.VITE_API_KEY' to inject an API key into a frontend Vue application. A security engineer raises a concern. Why?
- A.Vite does not support environment variables in Vue components
- B.import.meta.env variables are only available during the build process and are stripped from the output
- C.Vite encrypts VITE_ variables before bundling
- D.Any variable prefixed with 'VITE_' is intentionally bundled into the client-side JavaScript by Vite - anyone who downloads the JS bundle or inspects the page source can read the API key value
Why D is correct
Vite's convention: only variables prefixed with 'VITE_' are exposed to client-side code. Non-prefixed variables remain server-side (e.g., in SSR). If a secret API key is given the VITE_ prefix and embedded in a client bundle, it is publicly accessible to anyone who inspects the minified JavaScript. The correct approach: keep secret API keys on the server and proxy API calls through a backend endpoint.
Know someone studying for Web App Fundamentals? Send them this one.