Как будешь проводить работы по повышению безопасности сайта?

Как проводить работы по повышению безопасности сайта

Безопасность - это не одноразовая задача, а постоянный процесс. Расскажу про системный подход.

Этап 1: Аудит текущего состояния

Сначала нужно понять, где проблемы:

Инструменты для сканирования:

• OWASP ZAP - открытый инструмент для поиска уязвимостей
• Burp Suite - профессиональный инструмент (есть Community Edition)
• npm audit - проверка зависимостей на известные CVE
• Lighthouse - встроенная в DevTools проверка security
• OWASP Top 10 - список самых критичных уязвимостей

# Проверить зависимости
npm audit

# Обновить до исправленных версий
npm audit fix

Этап 2: Основные фронтенд уязвимости

1. XSS (Cross-Site Scripting)

Проблема: код пользователя выполняется в контексте сайта

// Плохо - опасно!
const userName = '<img src=x onerror="alert(1)">';
document.getElementById('user').innerHTML = userName;

// Хорошо - браузер экранирует
document.getElementById('user').textContent = userName;

В React это безопаснее по умолчанию:

// React экранирует по умолчанию
const html = '<img src=x onerror="alert(1)">';
<div>{html}</div> // безопасно!

// Плохо - явно говорим React НЕ экранировать
<div dangerouslySetInnerHTML={{__html: html}} />

2. CSRF (Cross-Site Request Forgery)

Проблема: злоумышленник делает запрос от имени пользователя

Решение: CSRF токены

// Сервер выдаёт токен
const csrfToken = await fetch('/api/csrf-token').then(r => r.json());

// Клиент отправляет токен с запросом
fetch('/api/profile/update', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': csrfToken.token
  },
  body: JSON.stringify({ name: 'John' })
});

3. XXE (XML External Entity)

Проблема: обработка XML с внешними ссылками

Решение: используй JSON вместо XML, отключи обработку внешних сущностей

4. Dependency Vulnerabilities

# Проверить уязвимые зависимости
npm audit

# Автоматически исправить
npm audit fix

# Проверить что обновилось
git diff package-lock.json

Этап 3: Безопасность данных

Хранение чувствительных данных

// Плохо - хранится в localStorage
localStorage.setItem('token', 'secret123');
// Доступно для XSS атак

// Хорошо - httpOnly cookie (только сервер может установить)
// Set-Cookie: token=secret123; HttpOnly; Secure; SameSite=Strict

HTTPS и Secure headers

// next.config.js или на уровне сервера
const headers = [
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=31536000; includeSubDomains'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY'
  },
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'"
  }
];

Этап 4: Input Validation и Sanitization

// Валидация на фронте (для UX, не для безопасности!)
const email = 'user@example.com';
if (!email.includes('@')) {
  throw new Error('Invalid email');
}

// Библиотека для валидации
import { z } from 'zod';
const userSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

// Валидация на СЕРВЕРЕ (обязательно!)
const result = userSchema.parse(inputData); // может выбросить ошибку

Этап 5: Мониторинг и реагирование

Инструменты:

• Sentry - отслеживание ошибок, включая security-related
• Snyk - мониторинг зависимостей в реальном времени
• GitHub Security Alerts - уведомления об уязвимостях
• Security.txt - информация о том, как報告 уязвимостей

// Сенторы для конфиденциальных действий
const logSecurityEvent = (event, details) => {
  console.warn(`[SECURITY] ${event}`, details);
  // Отправить на сервер для логирования
  fetch('/api/security-log', {
    method: 'POST',
    body: JSON.stringify({ event, details })
  });
};

// Пример
logSecurityEvent('SUSPICIOUS_LOGIN_ATTEMPT', {
  timestamp: new Date(),
  ipAddress: '192.168.1.1'
});

Этап 6: Тестирование безопасности

# Unit тесты с опасными INPUT'ами
describe('XSS Protection', () => {
  it('should not execute scripts', () => {
    const dangerous = '<img src=x onerror="alert(1)">';
    const { container } = render(<div>{dangerous}</div>);
    expect(container.innerHTML).not.toContain('alert');
  });
});

# Пентесты
# - Попросить фриланс пентестера
# - Участие в bug bounty программах
# - Регулярное тестирование с OWASP ZAP

Этап 7: Образование команды

• Code Review - проверять code на security issues
• Security Training - обучать команду OWASP Top 10
• Incident Response Plan - знать что делать при брече

Чеклист для production

• npm audit clean (нет уязвимостей)
• HTTPS включен
• CSP headers настроены
• CORS правильно настроен
• Tokens в httpOnly cookies
• Валидация на сервере
• Хеширование паролей (bcrypt)
• Rate limiting на API
• Логирование security events
• Regular пентесты

Вывод

Безопасность - это не одна функция, а система. Нужны:

1. Регулярный аудит с инструментами
2. Code review с security фокусом
3. Актуальные зависимости
4. Тестирование (unit + пентесты)
5. Мониторинг и логирование
6. Образование команды

Не полагайся на клиентскую безопасность - всегда валидируй и защищай на сервере.