Что такое CSRF и как от него защититься на уровне фронтенда?

Что такое CSRF?

CSRF (Cross-Site Request Forgery) — это тип атаки, при которой злоумышленник заставляет браузер аутентифицированного пользователя отправить запрос на целевой сайт без его ведома. Например, пользователь заходит на вредоносный сайт, который содержит скрытую форму или изображение, отправляющее POST-запрос на банковский сервер. Если пользователь уже авторизован на этом сервере (куки сохранены), запрос будет выполнен с его правами.

Как защититься на фронтенде?

Основные методы защиты на стороне клиента включают:

• CSRF-токены: Сервер генерирует уникальный токен, который встраивается в HTML-форму или передается через заголовок (например, X-CSRF-Token). При каждом запросе фронтенд отправляет этот токен, а сервер проверяет его. Токен должен быть случайным и привязанным к сессии.
• SameSite куки: Установка атрибута SameSite=Strict или Lax для кук предотвращает их отправку в кросс-сайтовых запросах. Например, SameSite=Lax разрешает отправку только для навигационных GET-запросов, что блокирует большинство CSRF-атак.
• Проверка заголовков: Сервер может проверять заголовки Origin или Referer, чтобы убедиться, что запрос пришел с доверенного источника. На фронтенде это не требует дополнительных действий, но сервер должен быть настроен.
• Кастомные заголовки: Использование кастомных заголовков (например, X-Requested-With: XMLHttpRequest) для AJAX-запросов, так как браузеры не позволяют устанавливать такие заголовки из кросс-доменных скриптов без CORS.

Пример реализации CSRF-токена на фронтенде

// Получаем CSRF-токен из мета-тега или куки
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

// Отправляем POST-запрос с токеном в заголовке
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken
  },
  body: JSON.stringify({ amount: 100, to: 'attacker' })
});

В этом примере токен извлекается из мета-тега, который сервер вставил в HTML. Затем он добавляется в заголовок запроса. Сервер проверяет токен и отклоняет запрос, если он не совпадает.

Вывод

CSRF-защита на фронтенде — это комбинация использования CSRF-токенов, правильной настройки кук (SameSite) и проверки заголовков. Эти методы эффективны против большинства атак, но требуют согласованной работы с сервером. Применять их стоит в любом веб-приложении, где есть аутентификация через куки и выполняются изменяющие состояние запросы (POST, PUT, DELETE).