Можно ли хранить секретные данные в environment variables фронтенд-приложения?

Почему это небезопасно

Переменные окружения (environment variables) во фронтенд-приложениях, например в React или Vue, подставляются на этапе сборки. Webpack или другой сборщик заменяет все вхождения process.env.API_KEY на фактическое значение. В результате эти данные оказываются в JavaScript-файлах, которые загружаются в браузер пользователя.

Как это работает на практике

Рассмотрим пример с Create React App:

// .env файл
REACT_APP_API_KEY=secret123

// В коде компонента
const apiKey = process.env.REACT_APP_API_KEY;
console.log(apiKey); // 'secret123'

После сборки в production-бандле будет просто строка 'secret123'. Любой пользователь может открыть DevTools, найти эту строку в исходниках и использовать её.

Правильный подход

Секретные данные должны храниться только на сервере. Фронтенд может обращаться к своему бэкенду, который уже использует секреты для работы с внешними API. Например:

// Фронтенд (React)
const response = await fetch('/api/data');

// Бэкенд (Node.js)
app.get('/api/data', (req, res) => {
  const secret = process.env.API_SECRET; // безопасно
  const data = await fetchExternalAPI(secret);
  res.json(data);
});

Вывод

Никогда не храните секреты в переменных окружения фронтенда. Используйте серверный прокси или BFF (Backend For Frontend) для безопасной работы с конфиденциальными данными. Это базовый принцип безопасности веб-приложений.