0Pricing
Vue Academy · Урок

Защита от CSRF в SPA на Vue

Файлы cookie SameSite, токены CSRF в Axios и шаблон двойной отправки cookie

«Защита от CSRF в SPA на Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что такое CSRF

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

Почему куки делают это возможным

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

Атрибут SameSite у куки

Установка SameSite для куки сообщает браузеру, когда отправлять ее в межсайтовых запросах. Значение SameSite=Strict запрещает отправлять куку при любом межсайтовом запросе и напрямую блокирует большинство атак CSRF.

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict и Lax

Strict обеспечивает максимальную безопасность, но может завершить сеанс пользователя при переходе по внешней ссылке. Lax отправляет куку только при навигации верхнего уровня методом GET, что часто является разумным компромиссом.

Шаблон синхронизирующего токена

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

Двойная отправка куки

Распространенный подход для SPA: сервер устанавливает токен CSRF в доступную для чтения куку, не защищенную HttpOnly. Клиент считывает его и повторно отправляет в заголовке. Сервер проверяет, совпадают ли два значения.

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

Чтение токена из куки

Считайте значение куки CSRF с помощью небольшой вспомогательной функции в приложении Vue.

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

Установка заголовка в запросах

Отправляйте токен в пользовательском заголовке, например X-CSRF-Token, при каждом запросе, изменяющем состояние (POST, PUT, PATCH, DELETE).

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Заголовки Axios по умолчанию

В Axios достаточно один раз задать заголовок по умолчанию, чтобы он автоматически добавлялся к каждому запросу.

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Встроенная поддержка xsrf в Axios

Axios может делать это автоматически: настройте имена куки и заголовка, и библиотека сама считает куку и установит заголовок.

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

Зачем нужен пользовательский заголовок

Браузеры запрещают междоменным сайтам устанавливать пользовательские заголовки без предварительного запроса CORS. Требование X-CSRF-Token означает, что поддельный межсайтовый запрос не сможет его добавить, поэтому сервер отклонит его.

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

Какой атрибут куки сам по себе наиболее непосредственно снижает риск CSRF?

Итоги

CSRF использует автоматически отправляемые куки для подделки запросов, изменяющих состояние. Установите SameSite=Strict для куки авторизации как основную защиту и добавьте токен CSRF: считывайте его из куки и отправляйте при каждом изменяющем данные запросе в заголовке X-CSRF-Token, настроенном один раз как значение по умолчанию в Axios или через встроенные параметры xsrf в Axios.

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

Урок «Защита от CSRF в SPA на Vue» бесплатный?

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

Чему я научусь в уроке «Защита от CSRF в SPA на Vue»?

Файлы cookie SameSite, токены CSRF в Axios и шаблон двойной отправки cookie Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Защита от CSRF в SPA на Vue»?

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

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

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

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

  1. Предотвращение XSS во Vue
  2. Политика безопасности содержимого (CSP) с Vue
  3. Защита от CSRF в SPA на Vue
  4. Безопасные шаблоны аутентификации
← Назад к Vue Academy