Vite Env Variables Exposed to Client Official Docs
To share values with browser code, add the public prefix to your variable names. The vite env variables exposed to client official docs state that unprefixed keys stay hidden. Frontend teams often store service URLs and public tokens in local text files. When someone adds the public prefix to a secret key, the build tool bundles it. Anyone with a browser can read that secret in the public script files. How vite env variables exposed to client official docs work The build tool reads local text
End-to-End Encryption + Client-Initiated Backchannel Authentication (CIBA): the complete guide
Architecture patterns, implementation strategies, and security best practices. Delivered to your inbox.
To share values with browser code, add the public prefix to your variable names. The vite env variables exposed to client official docs state that unprefixed keys stay hidden. Frontend teams often store service URLs and public tokens in local text files. When someone adds the public prefix to a secret key, the build tool bundles it. Anyone with a browser can read that secret in the public script files.
How vite env variables exposed to client official docs work
The build tool reads local text files from the project root folder when starting. It loads these values into the build process so your setup files can read them. By default, the tool blocks all loaded variables from entering the browser code. This rule stops developers from leaking database passwords or private keys by mistake. To send a value to the browser, you must add the required public prefix.
During the build step, the bundler scans your client code for matching variable names. It replaces each reference with the actual text value from your local file. The final bundle holds plain text strings rather than dynamic lookups. You can also set up mode files for staging, testing, or live builds. The tool picks the right file based on the command you run.
Some teams change the default prefix setting in their main build file. This choice lets them match naming rules from older build tools. Still, making the prefix too broad creates a huge risk for the team. If a developer sets an empty prefix, every system variable goes to the browser.
What the build prefix solves and what it leaves open
The prefix rule solves one specific problem during the code build step. It separates server build settings from public values meant for the user interface. A developer has to type the prefix on purpose to share a variable. This simple check prevents most accidental leaks of local machine variables during a build.
Still, this build check does not protect your backend systems during live use. Once a key has the prefix, it lives inside the public JavaScript bundle. Any user can open browser tools and copy that key in seconds. If that token has broad backend permissions, an attacker can run harmful queries. They can pull customer emails, phone numbers, card numbers, or national IDs from storage.
End-to-End Encryption + Client-Initiated Backchannel Authentication (CIBA): architecture patterns and best practices
Continue reading? Get the full guide.
Free. No spam. Unsubscribe anytime.
Teams also face risks on their own laptops and build servers. Local variable files hold real secrets that do not have the public prefix. Developers still need those backend secrets on disk to run local server tests. If a script or bad package reads the disk, those unprefixed secrets leak. Build prefixes only filter the browser output, not what happens during live data requests. They decide what enters the bundle, not what individual queries or commands do.
Managing backend secrets outside the client bundle
Safe frontend apps never put database keys or admin tokens into browser files. Instead, the browser app sends requests to a backend server that holds the keys. This design keeps private values off the user screen and out of public code. Even on the backend, teams must limit what each key and role can do. Static files on developer laptops still leave real secrets sitting in plain text.
Add runtime guardrails and masking beside your databases and APIs
Login rules, role grants, and CI checks govern who connects to your stack. Yet any allowed script, engineer, or AI agent still runs commands with the full scope of its role. For workloads on Postgres, MySQL, SQL Server, MongoDB, ClickHouse, Kubernetes, SSH, or internal HTTP services, hoop.dev sits beside the service as an open-source proxy, a sidecar for your database or API.
Before a query runs, hoop.dev guardrails check the statement against your rules. An AI Analyzer you configure can score intent or hold risky calls for human review. Next, hoop.dev data masking rewrites sensitive fields in responses, and each verdict is logged per listener. Explore the MIT-licensed project on GitHub.
Frequently asked questions
Why are my variables undefined in the browser?
The build tool hides variables that lack the required public prefix by default. Check your variable file and add the standard prefix to the key name. After you save the file, restart the local server to load the changes.
Are prefixed variables safe for private API keys?
No, every prefixed variable gets baked right into the public browser bundle. Users can inspect the network tab or source files to read the plain text. Keep private keys on a backend server and never expose them to client code.
When does the build tool replace variable references?
The tool swaps variable names with static text strings when it builds the app. Because this happens at build time, changing the server file later does nothing. You must run a fresh build whenever you change a public variable value.