CSRF-защита

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

Umbrella JS — это легковесная библиотека для работы с DOM и AJAX, которая предоставляет компактный API для манипуляции элементами страницы, управления событиями и выполнения HTTP-запросов. В контексте CSRF защита реализуется как на клиентской стороне, так и на серверной, но Umbrella JS играет ключевую роль в безопасной отправке данных.

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

На стороне сервера обычно генерируется уникальный CSRF-токен, который необходимо включать в каждое критическое состояние или POST-запрос. Чаще всего токен хранится:

  • В cookie с атрибутом HttpOnly=false (чтобы его можно было прочитать скриптом).
  • В скрытом поле формы (<input type="hidden" name="csrf_token" value="...">).

С помощью Umbrella JS токен можно извлечь следующим образом:

// Извлечение токена из скрытого поля формы
const csrfToken = u('input[name="csrf_token"]').val();

Если токен хранится в meta-теге HTML, можно использовать:

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

Включение CSRF-токена в AJAX-запросы

Umbrella JS предоставляет удобный метод u.ajax() для выполнения HTTP-запросов. Для защиты от CSRF критические POST, PUT, DELETE запросы должны содержать токен в заголовке или теле запроса.

Пример отправки POST-запроса с CSRF-токеном в заголовке:

u.ajax({
    url: '/update-profile',
    method: 'POST',
    headers: {
        'X-CSRF-Token': csrfToken
    },
    data: {
        username: 'newUserName'
    },
    success: function(response) {
        console.log('Данные успешно обновлены', response);
    },
    error: function(err) {
        console.error('Ошибка при обновлении', err);
    }
});

Пример отправки CSRF-токена в теле запроса:

u.ajax({
    url: '/submit-form',
    method: 'POST',
    data: {
        csrf_token: csrfToken,
        message: 'Пример сообщения'
    }
});

Автоматизация включения CSRF-токена

Для упрощения повторяющихся операций можно создать функцию-обертку, которая добавляет CSRF-токен ко всем AJAX-запросам:

function secureAjax(options) {
    options.headers = options.headers || {};
    const token = u('meta[name="csrf-token"]').attr('content');
    options.headers['X-CSRF-Token'] = token;
    return u.ajax(options);
}

// Использование
secureAjax({
    url: '/delete-item',
    method: 'DELETE',
    data: { itemId: 42 },
    success: function() { console.log('Элемент удален'); }
});

Такой подход позволяет централизованно управлять CSRF-токенами, снижая риск ошибок и упрощая поддержку кода.

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

Umbrella JS облегчает работу с формами и добавление CSRF-токена к отправке данных. Для всех форм на странице можно автоматически включить токен при сабмите:

u('form').on('submit', function(e) {
    e.preventDefault();
    const form = u(this);
    const data = form.serialize();
    data.csrf_token = u('meta[name="csrf-token"]').attr('content');

    u.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: data,
        success: function(response) { console.log('Форма отправлена', response); }
    });
});

Метод serialize() в Umbrella JS позволяет преобразовать поля формы в объект, готовый для AJAX-запроса. Добавление CSRF-токена гарантирует, что сервер сможет проверить подлинность запроса.

Дополнительные меры безопасности

  1. Разделение токенов по сессиям – токен должен быть уникальным для каждой пользовательской сессии.
  2. Обновление токена – рекомендуется обновлять CSRF-токен после каждой успешной отправки формы.
  3. Ограничение сроков действия – токены должны иметь ограниченный срок действия, чтобы уменьшить риск их повторного использования.
  4. Использование заголовков X-Requested-With – сервер может проверять наличие X-Requested-With: XMLHttpRequest для подтверждения, что запрос пришел из AJAX.

Вывод

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

Оглавление