Una variable llamada VITE_PRIVATE_TOKEN queda expuesta si el código del navegador la utiliza. La palabra «private» no la protege: Vite incluye su valor en el JavaScript que entrega al visitante.
Guardar el valor en un archivo .env excluido del repositorio no impide que Vite lo incluya en la aplicación si lo utiliza el código del navegador.
Qué expone VITE_
Vite expone al cliente las variables con prefijo VITE_ y sustituye sus referencias al compilar. Los valores personalizados se leen como cadenas de texto. Usa estas variables para configuración pública, como la URL de una API, y conserva las credenciales privadas en el servidor. La documentación lo explica en su guía de variables y modos.
No todas las claves que se llaman «API key» son secretas: algunos servicios ofrecen identificadores públicos para clientes. Antes de usarlos, consulta qué permisos conceden y qué restricciones recomienda el proveedor.
Cambiar el prefijo no protege las variables que sigues exponiendo al navegador. envPrefix decide qué variables se exponen; Vite incluso rechaza un prefijo vacío para evitar divulgar todo el entorno. Está documentado en las opciones compartidas. Conservar VITE_ permite identificar de forma consistente las variables que pueden exponerse al cliente.
Configurar variables públicas
En una aplicación cliente existente con Vite, este archivo .env.production contiene únicamente configuración pública:
VITE_API_URL=https://api.example.com
VITE_DEBUG=false
El dominio example.com es ilustrativo. En src/main.js, o en el módulo equivalente de la aplicación, puedes construir la configuración así:
export const config = {
apiUrl: import.meta.env.VITE_API_URL,
debug: import.meta.env.VITE_DEBUG === 'true',
};
Compara el valor con la cadena 'true' para obtener un booleano. Boolean('false') devuelve true porque cualquier cadena no vacía se evalúa como verdadera. MDN recoge este comportamiento en su explicación de los valores truthy.
Si el proyecto exige una URL, valida su presencia al arrancar y muestra un error claro cuando falte. Así detectarás el problema antes de que la aplicación intente enviar una petición con una URL incorrecta.
Valores fijados al compilar
Imagina que construyes el frontend con la URL de pruebas y luego copias el resultado a producción. Cambiar una variable del contenedor que sirve esos archivos no reescribe el JavaScript ya generado. El navegador descarga el resultado de la compilación anterior.
La guía de producción de Vite describe precisamente ese resultado: un paquete que puede servirse desde alojamiento estático. Si cada entorno necesita valores diferentes durante la compilación, genera un paquete por entorno y registra con qué configuración se compiló cada uno.
En Docker, los argumentos usados durante la construcción de la imagen y las variables del contenedor se aplican en momentos distintos. Su documentación sobre variables de construcción también advierte que ARG y ENV no son mecanismos para pasar secretos al build. Pasar una credencial mediante ARG o ENV puede dejarla expuesta en la imagen o en los metadatos de construcción.
Configuración al iniciar la aplicación
Si necesitas desplegar los mismos archivos compilados en varios entornos, puedes cargar la configuración pública al iniciar la aplicación. Por ejemplo, el servidor puede entregarla mediante una ruta /config.json.
Tendrás que implementar esa carga: import.meta.env no la hace automáticamente. La aplicación debe esperar la respuesta, validarla, gestionar la caché y mostrar un error si no puede obtenerla. Esto permite cambiar la configuración pública sin recompilar el cliente, aunque para una web sencilla puede ser más fácil compilar una versión por entorno.
Ese JSON seguirá siendo visible para cualquiera que abra la aplicación. Es apropiado para una URL de servicio o una etiqueta de entorno, nunca para una contraseña. Si una operación exige una credencial privada, ejecútala en un backend que autorice la petición y mantenga la credencial bajo su control.
Revocar una credencial expuesta
Eliminar la línea y volver a desplegar no garantiza que una credencial divulgada deje de funcionar. El archivo anterior puede haber sido descargado. Revoca la credencial o sustitúyela por una nueva y revisa si se ha utilizado sin autorización, siguiendo las recomendaciones de OWASP para gestionar secretos.
Para revisar el próximo despliegue, busca un valor público conocido en el JavaScript generado y comprueba a qué servicio apunta el navegador. Cualquier valor incluido en el código o en la configuración que descarga el navegador debe considerarse accesible para el visitante.