CSRF токены

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

Механизм работы CSRF токенов

  1. Генерация токена на сервере Сервер создает уникальный CSRF токен для каждой сессии пользователя. Токен должен быть случайным, сложно предсказуемым и привязанным к конкретной сессии.

  2. Передача токена клиенту Обычно токен отправляется вместе с HTML страницей через скрытое поле формы или в заголовке ответа. В SPA (Single Page Application) приложениях, построенных на Quasar, токен часто передается через API-запрос при аутентификации.

  3. Включение токена в запросы Все защищенные POST, PUT, PATCH и DELETE запросы должны включать CSRF токен. Сервер сверяет полученный токен с сохраненным значением и разрешает или отклоняет запрос.

Интеграция CSRF токенов в Quasar

Использование Axios

Quasar рекомендует использовать axios для выполнения HTTP-запросов. CSRF токены можно автоматически включать в заголовки запросов:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://example.com/api',
  withCredentials: true
});

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

api.interceptors.request.use(config => {
  if (token) {
    config.headers['X-CSRF-TOKEN'] = token;
  }
  return config;
});

Пояснение:

  • withCredentials: true обеспечивает отправку cookies вместе с запросом, что необходимо для сессий.
  • Заголовок X-CSRF-TOKEN соответствует стандартной практике передачи токена на сервер.

Работа с формами Quasar

Quasar предоставляет компоненты форм: q-form, q-input, q-btn. Включение CSRF токена в формы осуществляется через скрытое поле:

<q-form @submit="submitForm">
  <input type="hidden" name="_csrf" :value="csrfToken">
  <q-input filled v-model="formData.name" label="Имя"></q-input>
  <q-btn type="submit" label="Отправить"></q-btn>
</q-form>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      },
      csrfToken: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    };
  },
  methods: {
    submitForm() {
      this.$axios.post('/submit', {
        ...this.formData,
        _csrf: this.csrfToken
      }).then(response => {
        console.log('Успешно отправлено', response.data);
      }).catch(error => {
        console.error('Ошибка при отправке', error);
      });
    }
  }
};
</script>

Ключевые моменты:

  • Токен передается как скрытое поле _csrf для серверной проверки.
  • В SPA важно, чтобы токен обновлялся при каждой новой сессии или после истечения срока действия.

Автоматическое обновление CSRF токенов

В сложных приложениях CSRF токен может обновляться без перезагрузки страницы. Для этого используется отдельный API-эндпоинт, возвращающий новый токен:

async function refreshCsrfToken() {
  const response = await api.get('/csrf-token');
  const newToken = response.data.token;
  document.querySelector('meta[name="csrf-token"]').setAttribute('content', newToken);
  return newToken;
}

Далее новый токен подставляется в заголовки всех последующих запросов и скрытые поля форм. Такой подход предотвращает ошибки при долгих сессиях.

Особенности защиты в Quasar SPA

  1. Single Page Application В SPA нет полной перезагрузки страницы, поэтому мета-теги могут устаревать. Токен должен храниться в состоянии приложения, например, в Vuex или Pinia.

  2. AJAX-запросы Все POST, PUT, PATCH, DELETE запросы через Axios должны включать актуальный CSRF токен.

  3. Обновление после аутентификации После входа пользователя токен может измениться. Нужно обновить локальное состояние и скрытые поля форм.

Практические рекомендации

  • Хранить токен в безопасном месте и никогда не включать его в URL.
  • Всегда проверять токен на серверной стороне.
  • Использовать один и тот же токен для формы и AJAX-запросов в одной сессии.
  • Обновлять токен при изменении состояния сессии, особенно после входа или выхода пользователя.

CSRF токены в сочетании с компонентами Quasar позволяют создавать безопасные формы и запросы, сохраняя при этом удобство SPA-разработки. Их корректная интеграция обеспечивает защиту от подделки запросов и поддерживает надежную работу клиент-серверной архитектуры.

Оглавление