Защита от CSRF в React и настройках API

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

Cookie являются основной причиной уязвимости CSRF. Когда пользователь входит в Ваше приложение, его сеансовый cookie сохраняется в браузере. Когда пользователь посещает страницу злоумышленника, злоумышленник может инициировать отправку формы или запрос fetch к Вашему API, и браузер автоматически добавит сеансовый cookie, а значит, аутентифицирует вредоносный запрос.

Атрибут cookie SameSite сообщает браузерам, когда нужно включать cookie в межсайтовые запросы. У него есть три значения: Lax (значение по умолчанию в современных браузерах — блокирует межсайтовые POST, но разрешает GET), Strict (блокирует все межсайтовые запросы, включая переходы GET) и None (разрешает межсайтовые запросы, но требует HTTPS и защищенного флага).

SameSite=Lax блокирует межсайтовые запросы POST, PUT, DELETE и PATCH — методы, используемые для изменения данных. Если Ваш API использует GET только для чтения, а POST — для всех изменений, SameSite=Lax эффективно предотвращает CSRF для SPA в современных браузерах. Сегодня это базовая мера защиты, на которую опирается большинство приложений.

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

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

SPA на React, которое хранит свой JWT в памяти или в localStorage и отправляет его в заголовке Authorization: Bearer, не подвержено классической CSRF. Атаки CSRF используют аутентификацию на основе cookie — страница злоумышленника не может установить пользовательские заголовки в междоменных запросах из-за ограничений CORS, поэтому не может подделать заголовок Authorization.

Простые междоменные запросы (отправка формы POST, загрузка изображения) не позволяют использовать пользовательские заголовки. Только запросы, проходящие предварительную проверку CORS, могут содержать пользовательские заголовки, а для запросов с предварительной проверкой требуется явное разрешение сервера. API, требующий пользовательский заголовок (например, X-Requested-With: XMLHttpRequest) для всех операций изменения, по своей сути защищен от простых атак CSRF.

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

Настройте сеансовые файлы cookie с такими параметрами: HttpOnly: true (не позволяет JavaScript читать файл cookie и блокирует кражу токенов с помощью XSS), Secure: true (файл cookie отправляется только по HTTPS), SameSite: Lax или Strict (предотвращает CSRF), а также с подходящим значением Max-Age или сроком действия. Все четыре атрибута вместе значительно повышают безопасность управления сеансами.

Маршрутизатор приложений Next.js использует серверные действия, представляющие собой POST-запросы. Next.js реализует защиту от CSRF, проверяя заголовок Origin на соответствие имени хоста: запросы из неожиданных источников отклоняются. Эта встроенная проверка в сочетании с сеансовыми файлами cookie SameSite=Lax обеспечивает надежную защиту от CSRF для операций изменения данных на основе серверных действий.

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

CSRF использует аутентификацию на основе файлов cookie, заставляя браузер отправлять межсайтовые запросы от имени аутентифицированного пользователя. SameSite=Lax — базовая защита для современных браузеров. Дополнительную защиту обеспечивают шаблоны двойной отправки файла cookie и синхронизирующего токена. SPA на React, использующие JWT в заголовках авторизации, по своей природе устойчивы к CSRF. Пользовательские обязательные заголовки и предварительная проверка CORS также снижают риск CSRF. Всегда сочетайте HttpOnly + Secure + SameSite для сеансовых файлов cookie.