Какие данные ценные у сайта?

Ценные данные сайта: разница между frontend и backend задачами

Этот вопрос проверяет понимание архитектуры приложения. На первый взгляд он про безопасность, но суть в том, какие данные должны обрабатываться на фронтенде, а какие - на бэкенде.

1. Что НЕ ценно на фронтенде

Фронтенд в браузере - это публичное окружение. Все, что там находится, может быть просмотрено и изменено пользователем:

// Плохо: секретные данные на фронтенде
const API_KEY = 'sk-1234567890abcdef'; // Любой видит в исходном коде
const SECRET_TOKEN = 'secret-token-12345'; // Видно в DevTools
const DATABASE_URL = 'postgresql://user:pass@localhost:5432/db'; // Credentials!

// Это видно в:
// - Исходном коде (View Source)
// - Network вкладке DevTools
// - JavaScript консоли
// - Кеше браузера
// - Cookies (если не защищены)

2. Никогда не кладите на фронтенд:

1. API ключи и токены доступа

// Неправильно
fetch('https://api.service.com/data', {
  headers: {
    'Authorization': 'Bearer sk-1234567890abcdef' // Видно всем!
  }
});

// Правильно: запросить у бэкенда
fetch('/api/proxy/service-data', {
  // Бэкенд добавляет токен скрыто
});

2. Credentials базы данных

// Неправильно
const dbConnection = {
  host: 'db.internal.company.com',
  username: 'admin',
  password: 'SuperSecurePassword123!' // Это видно всем
};

// Правильно: только на сервере
// backend/.env
// DATABASE_URL=postgresql://admin:pass@db.internal:5432/mydb

3. Приватные ключи и сертификаты

// Неправильно
const privateKey = `-----BEGIN PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAo...
-----END PRIVATE KEY-----`;

// Правильно: только на сервере для шифрования/подписи

4. Приватные бизнес-логика и алгоритмы

// Неправильно: открытая формула расчета цены
const calculatePrice = (quantity, discountCode) => {
  const basePrice = 100;
  const discounts = {
    'SUMMER50': 0.5,
    'WINTER30': 0.3,
    'INTERNAL10': 0.1 // Внутренняя скидка видна!
  };
  return quantity * basePrice * (1 - (discounts[discountCode] || 0));
};

// Правильно: расчет на сервере
const response = await fetch('/api/calculate-price', {
  method: 'POST',
  body: JSON.stringify({ quantity, discountCode })
});
// Бэкенд скрывает логику расчета

3. Какие данные МОЖНО на фронтенде

1. Информация о текущем пользователе (не содержащая secrets)

// Безопасно
const user = {
  id: '123',
  name: 'John Doe',
  email: 'john@example.com',
  avatar: 'https://...',
  role: 'user', // Уровень доступа
  preferences: { theme: 'dark', language: 'en' }
};

// Опасно
const user = {
  ...user,
  password_hash: '...', // Никогда!
  ssn: '123-45-6789', // Приватные данные!
  internal_id: '...' // Может раскрыть систему нумерации
};

2. Конфигурация UI и темы

// Безопасно
const config = {
  apiVersion: 'v1',
  maxUploadSize: 10485760, // 10MB
  features: {
    darkMode: true,
    notifications: true,
    socialSharing: false
  },
  supportEmail: 'support@example.com'
};

3. Метаданные и информация о структуре

// Безопасно: публичная информация
const pageMetadata = {
  title: 'User Dashboard',
  description: 'Manage your profile',
  keywords: ['profile', 'settings']
};

const navigation = [
  { label: 'Home', href: '/' },
  { label: 'Profile', href: '/profile' },
  { label: 'Settings', href: '/settings' }
];

4. Данные для UI состояний

// Безопасно
const uiState = {
  isModalOpen: false,
  selectedTab: 'overview',
  isSidebarCollapsed: false,
  theme: 'light'
};

4. Стратегия безопасности: слои данных

Уровень 1 (Фронтенд): Публичные данные
  - Информация о UI
  - Конфиг приложения
  - Метаданные
  - Профиль пользователя (без secrets)
  - Данные для рендера

Уровень 2 (API Gateway / BFF): Защищенный доступ
  - Валидация токенов
  - Проверка прав доступа
  - Логирование
  - Rate limiting

Уровень 3 (Бэкенд): Критичные операции
  - Обработка платежей
  - Работа с БД
  - Шифрование/дешифрование
  - Бизнес-логика
  - Работа с external API с secrets

Уровень 4 (Инфраструктура): Максимальная безопасность
  - Хранилище secrets
  - SSH ключи
  - Database credentials
  - API keys для external сервисов

5. Примеры правильной архитектуры

Правильное разделение:

// Frontend: получить данные для UI
const { data: user } = useGetCurrentUserQuery();
// Возвращает: { id, name, email, avatar, preferences }

// Попытка получить пароль
const { data: password } = useGetUserPasswordQuery(); // 404 Not Found!

// Frontend: отправить действие на сервер
await updateUserEmail.mutateAsync({
  newEmail: 'new@example.com'
});
// Бэкенд:
// 1. Проверяет авторизацию
// 2. Валидирует email
// 3. Отправляет confirmation code на старый email
// 4. Обновляет БД

Правильная работа с платежами:

// Frontend: инициирует платеж
const createPaymentIntent = async (amount: number) => {
  const response = await fetch('/api/create-payment-intent', {
    method: 'POST',
    body: JSON.stringify({ amount })
  });
  const { clientSecret } = await response.json();
  // Возвращает только clientSecret, не API key!
  return clientSecret;
};

// Используем с Stripe
const { clientSecret } = await createPaymentIntent(10000);
const stripe = await loadStripe('pk_test_public_key'); // Публичный ключ OK
await stripe.confirmPayment({
  elements,
  clientSecret
});

// Backend скрывает:
// - Secret key Stripe
// - Логику расчета комиссий
// - Проверку лимитов
// - Запись в БД

6. Проверка: что спросить себя

Прежде чем положить данные на фронтенд, спросите:

1. Это секрет? - Если да, не кладите на фронтенд
2. Это изменяемо пользователем? - Если пользователь может изменить значение и это повлияет на логику, кладите на бэкенд
3. Это влияет на безопасность? - Если да, обрабатывайте на бэкенде
4. Это публичная информация? - Если да, можно на фронтенде
5. Это нужно для юзер-экспириенса? - Если да и это не секрет, можно на фронтенде

7. Примеры опасных практик в реальных проектах

// Опасно: API key в .env файле, но коммичен в git
// .env файл в public/
REACT_APP_API_KEY=sk-12345 // Виден в исходном коде

// Опасно: token в localStorage без HttpOnly
localStorage.setItem('auth_token', 'secret-token');
// Уязвим для XSS

// Опасно: основная бизнес-логика на фронтенде
const canAccessPremiumFeature = () => {
  return user.plan === 'premium'; // Пользователь может изменить!
};

// Правильно: проверка на сервере
const response = await fetch('/api/features/premium');
const { hasAccess } = await response.json();
// Сервер проверяет подписку в БД

Резюме

Ценные данные сайта - это те, которые:

1. Влияют на безопасность (secrets, tokens, keys)
2. Влияют на бизнес-логику (цены, скидки, алгоритмы)
3. Содержат приватную информацию (passwords, SSN)
4. Требуют проверки на сервере (права доступа)

Эти данные НИКОГДА не должны быть на фронтенде!

Архитектура: фронтенд получает только данные для UI, бэкенд обрабатывает критичные операции.