Попадают ли значения переменных окружения в итоговый bundle?

Как переменные окружения попадают в bundle

Переменные окружения (environment variables) — это значения, которые передаются приложению во время выполнения. В процессе сборки (например, с помощью Webpack или Vite) эти переменные могут быть подставлены непосредственно в код. Если переменная используется в клиентском коде, её значение будет встроено в итоговый bundle, который отправляется браузеру.

Пример с Webpack

Рассмотрим пример с использованием Webpack и плагина DefinePlugin:

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    })
  ]
};

// В коде приложения
const apiUrl = process.env.API_URL;
console.log(apiUrl); // После сборки будет заменено на фактическое значение

После сборки в bundle будет вставлено значение переменной, например https://api.example.com. Это означает, что любой пользователь может увидеть это значение, открыв исходный код приложения в браузере.

Риски безопасности

Если в переменных окружения хранятся секреты (например, ключи доступа к базе данных или токены), они станут доступны всем, кто загрузит ваше приложение. Поэтому никогда не следует передавать в клиентский код чувствительные данные. Используйте серверные переменные окружения для секретов и передавайте только те данные, которые необходимы для работы клиента (например, публичные API-ключи).

Вывод

Переменные окружения, используемые в клиентском коде, попадают в итоговый bundle и становятся видимыми для пользователей. Это нормально для публичных данных, но недопустимо для секретов. Для безопасной работы используйте серверные переменные окружения и передавайте только необходимые публичные значения.