Frontend Academy · Урок

CSRF: файлы cookie SameSite и токены

Урок 2 из 414 шагов

«CSRF: файлы cookie SameSite и токены» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое CSRF

Подделка межсайтовых запросов: злоумышленник заставляет браузер аутентифицированного пользователя отправить запрос на ваш сайт. Браузер прикрепляет файлы cookie пользователя — сервер считает, что это легитимный запрос от пользователя.

Классическая атака CSRF

Пользователь вошёл в bank.com. Затем он посещает evil.com. Сайт evil.com отправляет скрытую форму на bank.com/transfer с номером счёта злоумышленника. Браузер автоматически отправляет файл cookie сеанса bank.com. Сервер переводит деньги.

Проблема доверия

CSRF работает потому, что браузеры автоматически включают файлы cookie в запросы между источниками. Без дополнительной защиты сервер не может определить, что запрос пришёл с вредоносного сайта.

Файлы cookie SameSite — современное решение

Атрибут файла cookie SameSite управляет тем, когда файлы cookie отправляются в запросах между источниками. Strict: никогда не отправляется между источниками. Lax (значение по умолчанию в Chrome): отправляется только при навигации верхнего уровня методом GET. None: всегда отправляется (при этом также должен быть установлен Secure).

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Lax

SameSite=Lax по умолчанию

Если атрибут SameSite не указан, Chrome по умолчанию задаёт для всех файлов cookie значение Lax. Это блокирует большинство атак CSRF, но всё равно следует указывать значение явно.

SameSite=Strict для максимальной безопасности

Используйте Strict для наиболее чувствительных файлов cookie (сеансов администраторов, банковских операций). Недостаток: при переходе по ссылке с другого сайта пользователь выглядит как вышедший из системы.

Токены CSRF (синхронизирующий шаблон)

Для поддержки старых браузеров или дополнительной безопасности используйте токены CSRF. Сервер создаёт случайный токен, встраивает его в страницу и требует его в каждом запросе, изменяющем состояние.

// Server embeds token in HTML or sets it as a non-HttpOnly cookie:
<meta name="csrf-token" content="a1b2c3...">

// Client reads token and sends in header:
const token = document.querySelector('meta[name=csrf-token]').content;
fetch('/transfer', {
  method: 'POST',
  headers: { 'X-CSRF-Token': token },
  body: JSON.stringify({ amount: 100 })
});

// Server verifies the X-CSRF-Token header matches the user's session

Двойная отправка файла cookie

Сервер устанавливает файл cookie CSRF (без HttpOnly, чтобы JS мог его прочитать). Клиент считывает его и отправляет значение в заголовке. Сервер проверяет, совпадает ли файл cookie со значением в заголовке. Злоумышленник не может прочитать файл cookie между источниками, поэтому не может воспроизвести заголовок.

Почему это работает

Злоумышленник с сайта evil.com не может прочитать файлы cookie сайта bank.com (политика одного источника). Поэтому он не может установить заголовок X-CSRF-Token. Запрос не проходит проверку токена на сервере.

CSRF в SPA с токенами Bearer

Если вы выполняете аутентификацию с помощью Authorization: Bearer <jwt>, хранящегося в памяти (а не в файле cookie), CSRF не применяется — браузеры не отправляют заголовки автоматически. Компромисс: повышается уязвимость к XSS, поскольку токены, доступные JS, можно украсть.

Приём с пользовательским заголовком

Для API, которые принимают только JSON с пользовательским заголовком (например, X-Requested-With), браузеры отправляют предварительный запрос OPTIONS и не включают файлы cookie в предварительный запрос. Это фактически блокирует CSRF через простые формы.

Идемпотентные и изменяющие состояние конечные точки

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

Быстрая проверка

Какое значение файла cookie SameSite по умолчанию предотвращает отправку файлов cookie в большинстве межсайтовых запросов в современных браузерах?

Ответь в интерактивном уроке

Итоги: предотвращение CSRF

Устанавливайте SameSite=Lax (или Strict) для файлов cookie сеанса — это блокирует большинство CSRF. Добавляйте HttpOnly и Secure. Для дополнительной защиты используйте токены CSRF (синхронизирующий шаблон или двойную отправку файла cookie). Токены Bearer в заголовках устраняют CSRF, но повышают риск XSS. Приём с пользовательским заголовком принудительно вызывает предварительный запрос. Делайте запросы GET идемпотентными.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «CSRF: файлы cookie SameSite и токены» бесплатный?

Да — полный текст урока «CSRF: файлы cookie SameSite и токены» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «CSRF: файлы cookie SameSite и токены»?

Разберитесь, как подделка межсайтовых запросов использует файлы cookie, применяйте SameSite=Strict/Lax для защиты и добавляйте синхронизирующие токены для дополнительной безопасности Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «CSRF: файлы cookie SameSite и токены»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Предотвращение XSS: кодирование вывода и CSP
CSRF: файлы cookie SameSite и токены
Политика безопасности содержимого: nonce и hash
Потоки OAuth на фронтенде

← Назад к Frontend Academy