Skip to content

Reset config for frontend environment variables

Vite’s native config for environment variables in the frontend has been updated, which forces Vite to expose all environment variables from .env (regardless of whether they start with VITE_). What this means in a more global context is that all envars from the hosting platform are being exposed (not just the ones contained in the .env file), which opens the site up to potential vulnerabilities. To get a better idea of what this means, take a look at the output of running process.env in the browser console while running the app locally, and compare it to running that same command in a browser tab that is running a different site (e.g. google.com).

To do:

  • Reset the native config for Vite in vite.config.js
  • Use import.meta.env to import envars instead of process.env
  • Ensure all envars start with VITE_ as going forward, Vite will now only look for variables in this format
  • Delete the .env file from the repo and add it to the .gitignore so it will not be committed going forward
  • Add a .env.example to the frontend
Edited by Amy Maule