Как узнать что приходит невалидный XS токен из cookie?

Как обнаружить невалидный XS-токен из cookie

Этот вопрос проверяет понимание работы с JWT (JSON Web Tokens), механизмов аутентификации и обработки ошибок на клиенте. В контексте фронтенда, особенно в связке с SPA-фреймворками (React, Vue, Angular), XS-токен часто используется для защиты от CSRF-атак или как часть сессионного механизма.

Основные подходы к валидации XS-токена

1. Проверка структуры и формата токена

Первый уровень — убедиться, что токен физически присутствует и имеет ожидаемую структуру.

function getXsToken() {
    const cookies = document.cookie.split(';');
    const xsCookie = cookies.find(c => c.trim().startsWith('XSRF-TOKEN='));
    return xsCookie ? decodeURIComponent(xsCookie.split('=')[1]) : null;
}

function isValidTokenFormat(token) {
    if (!token || typeof token !== 'string') {
        console.error('Токен отсутствует или не является строкой');
        return false;
    }
    
    // Для JWT проверяем наличие трёх частей, разделённых точками
    if (token.split('.').length !== 3) {
        console.warn('Токен не соответствует формату JWT');
        return false;
    }
    
    return true;
}

2. Декодирование полезной нагрузки (payload)

Если токен в формате JWT, можно извлечь и проверить его содержимое без верификации подписи.

function parseJwtPayload(token) {
    try {
        const base64Url = token.split('.')[1];
        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => 
            '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
        ).join(''));
        return JSON.parse(jsonPayload);
    } catch (error) {
        console.error('Ошибка парсинга JWT:', error);
        return null;
    }
}

function isTokenExpired(payload) {
    if (!payload.exp) return false; // Нет срока действия
    const currentTime = Math.floor(Date.now() / 1000);
    return payload.exp < currentTime;
}

3. Анализ HTTP-ответов сервера

Наиболее надежный способ — отслеживать ответы сервера при использовании токена.

// Пример с использованием fetch и перехватом ошибок
async function makeAuthenticatedRequest(url, options = {}) {
    const xsToken = getXsToken();
    
    if (!isValidTokenFormat(xsToken)) {
        throw new Error('Невалидный формат XS-токена');
    }
    
    const requestOptions = {
        ...options,
        headers: {
            'X-XSRF-TOKEN': xsToken,
            ...options.headers
        },
        credentials: 'include'
    };
    
    try {
        const response = await fetch(url, requestOptions);
        
        if (response.status === 401 || response.status === 403) {
            // Сервер отклонил запрос из-за невалидного токена
            console.error('Токен отвергнут сервером, код:', response.status);
            handleInvalidToken();
            return null;
        }
        
        if (!response.ok) {
            console.warn('Запрос завершился с ошибкой:', response.status);
        }
        
        return response;
    } catch (error) {
        console.error('Ошибка сети или сервера:', error);
        return null;
    }
}

function handleInvalidToken() {
    // Очистка невалидного токена
    document.cookie = 'XSRF-TOKEN=; Max-Age=0; path=/';
    // Перенаправление на страницу логина или обновление токена
    window.location.href = '/login?session_expired=true';
}

4. Использование перехватчиков (interceptors) в Axios

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

import axios from 'axios';

// Создаём экземпляр axios
const apiClient = axios.create({
    baseURL: process.env.API_URL,
    withCredentials: true
});

// Перехватчик запросов для добавления токена
apiClient.interceptors.request.use(config => {
    const xsToken = getXsToken();
    if (xsToken) {
        config.headers['X-XSRF-TOKEN'] = xsToken;
    }
    return config;
}, error => Promise.reject(error));

// Перехватчик ответов для обработки ошибок токена
apiClient.interceptors.response.use(
    response => response,
    error => {
        if (error.response) {
            const { status } = error.response;
            
            if (status === 401 || status === 403) {
                console.error('Невалидный или просроченный XS-токен');
                // Действия при невалидном токене
                localStorage.removeItem('user');
                window.dispatchEvent(new CustomEvent('auth-expired'));
            }
        }
        return Promise.reject(error);
    }
);

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

• Комбинация методов: Используйте и клиентскую проверку формата, и серверные ответы для максимальной надежности.
• Грамотная обработка ошибок: При обнаружении невалидного токена:
  • Показывайте понятное уведомление пользователю
  • Предлагайте повторную авторизацию
  • Сохраняйте состояние приложения для восстановления после логина
• Периодическая проверка: В долгоживущих приложениях реализуйте фоновую проверку валидности токена.
• Безопасность: Никогда не храните секреты JWT на клиенте — клиентская валидация лишь проверяет формат и срок, но не подпись.

Типичные признаки невалидного токена

1. Сервер возвращает 401 Unauthorized или 403 Forbidden
2. Токен отсутствует или имеет неправильный формат
3. Истёк срок действия (expired), если это JWT с полем exp
4. Несоответствие домена — токен, выданный для одного домена, используется на другом

Обнаружение невалидных токенов — критически важная часть системы безопасности и UX, так как позволяет своевременно переавторизовать пользователя без потери данных.