CSRF-токены

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

Получение CSRF-токена из HTML

На практике токен обычно передаётся сервером в HTML-странице. Наиболее распространённый подход — хранение токена в мета-теге:

<meta name="csrf-token" content="123abc456def">

В jQuery его можно извлечь следующим образом:

var csrfToken = $('meta[name="csrf-token"]').attr('content');

Теперь переменная csrfToken содержит актуальное значение токена, которое можно использовать в AJAX-запросах.

Передача CSRF-токена в AJAX-запросах

Для защиты серверных маршрутов, изменяющих данные (POST, PUT, DELETE), токен нужно отправлять вместе с запросом. jQuery позволяет это сделать несколькими способами.

1. Через headers в отдельном запросе:

$.ajax({
    url: '/update-profile',
    type: 'POST',
    headers: {
        'X-CSRF-TOKEN': csrfToken
    },
    data: {
        username: 'new_username',
        email: 'new_email@example.com'
    },
    success: function(response) {
        console.log('Профиль обновлён', response);
    },
    error: function(xhr) {
        console.error('Ошибка запроса', xhr);
    }
});

2. Через глобальную настройку jQuery ($.ajaxSetup)

Если на странице выполняется множество AJAX-запросов, удобнее настроить передачу токена глобально:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': csrfToken
    }
});

После этого каждый последующий запрос jQuery автоматически будет включать CSRF-токен.

Интеграция с формами

CSRF-токен можно также добавлять напрямую в формы, чтобы при отправке POST-запроса через AJAX он передавался вместе с данными:

$('#myForm').submit(function(event) {
    event.preventDefault();

    var formData = $(this).serializeArray();
    formData.push({ name: '_csrf', value: csrfToken });

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $.param(formData),
        success: function(response) {
            console.log('Данные успешно отправлены', response);
        },
        error: function(xhr) {
            console.error('Ошибка при отправке формы', xhr);
        }
    });
});

Использование метода serializeArray() обеспечивает корректное получение всех полей формы, после чего токен добавляется вручную.

Защита всех POST-запросов

Для проектов с большим количеством форм и AJAX-вызовов часто применяется подход, когда токен автоматически включается во все POST-запросы:

$(document).ajaxSend(function(event, xhr, settings) {
    if (settings.type === 'POST') {
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
    }
});

Этот приём гарантирует, что независимо от того, где инициирован запрос, сервер всегда получает актуальный CSRF-токен.

Особенности работы с динамически подгружаемыми элементами

Если токен обновляется сервером после каждой операции или после авторизации, необходимо следить за его актуальностью. jQuery позволяет динамически обновлять переменную токена при изменении DOM:

function refreshCsrfToken() {
    csrfToken = $('meta[name="csrf-token"]').attr('content');
}

$(document).on('ajaxComplete', function() {
    refreshCsrfToken();
});

Такой подход предотвращает ситуации, когда устаревший токен вызывает ошибки на сервере.

Вывод

CSRF-токены в связке с jQuery обеспечивают надёжную защиту при работе с AJAX-запросами и формами. Использование глобальной настройки $.ajaxSetup, динамическое обновление токена и правильная интеграция с формами минимизируют риск атак CSRF и упрощают работу с безопасными запросами на стороне клиента.

Оглавление