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

Ответ

Для проверки валидности XS-токена из cookie можно использовать несколько подходов:

  1. Проверить структуру токена (обычно JWT):
const xsToken = document.cookie.split('; ')
  .find(row => row.startsWith('XSRF-TOKEN='))
  ?.split('=')[1];

if (!xsToken || xsToken.split('.').length !== 3) {
  console.error('Invalid XSRF token structure');
}
  1. Проверить срок действия (если токен содержит exp):
const payload = JSON.parse(atob(xsToken.split('.')[1]));
if (payload.exp && payload.exp < Date.now() / 1000) {
  console.error('XSRF token expired');
}
  1. Отправить проверочный запрос к API:
fetch('/api/validate-token', {
  headers: { 'X-XSRF-TOKEN': xsToken }
}).then(response => {
  if (response.status === 403) {
    console.error('Invalid XSRF token');
  }
});

Ошибки обычно проявляются как 403 Forbidden при запросах или несоответствие токена в заголовке и cookie. Для production лучше использовать библиотеки типа js-cookie для работы с cookie и axios для автоматической обработки CSRF-токенов.

Ответ 18+ 🔞

А, слушай, смотри, вот этот твой XS-токен, который в куках сидит, как его проверить-то, чтобы не вышло, что ты с ним как дурак с гранатой? Давай разберём, как не наступить на эти грабли.

Первым делом, вытащи его оттуда, из этих кук. Но смотри, не накосячь — там может и не быть его вовсе, тогда сразу ясно, что дело пахнет керосином.

const xsToken = document.cookie.split('; ')
  .find(row => row.startsWith('XSRF-TOKEN='))
  ?.split('=')[1];

if (!xsToken || xsToken.split('.').length !== 3) {
  console.error('Invalid XSRF token structure');
}

Вот, смотри: если токена нет или он на три части по точкам не делится — это уже пиздец, а не JWT. Значит, его структура кривая, как рога у чёрта.

Дальше, если он вроде целый, глянь, не протух ли он уже. Там внутри, в средней части (это payload, блядь), часто дату смерти exp пишут.

const payload = JSON.parse(atob(xsToken.split('.')[1]));
if (payload.exp && payload.exp < Date.now() / 1000) {
  console.error('XSRF token expired');
}

Если срок вышел — всё, товарищ, ваш билет в один конец. Токену пизда, и тебе с ним делать нечего.

Но это всё, хуйня, проверки на клиенте. Они как презерватив из целлофана — вроде есть, а толку ноль. Самый надёжный способ — спросить у сервера: «Эй, мудак, этот твой токен ещё жив?».

fetch('/api/validate-token', {
  headers: { 'X-XSRF-TOKEN': xsToken }
}).then(response => {
  if (response.status === 403) {
    console.error('Invalid XSRF token');
  }
});

Отправляешь запрос с этим токеном в заголовке. Если сервер отвечает «403 Forbidden» — значит, токен хуёвый, недействительный или вообще от другого цирка. Вот тогда и начинается веселье: запросы не проходят, а в консоли одна ошибка краше другой.

В продакшене, конечно, не надо это всё руками городить, а то охуеешь. Бери нормальные библиотеки: js-cookie — чтобы с куками не ебаться как уж на сковородке, и axios — он эти CSRF-токены сам подхватывает и вставляет куда надо. И волки сыты, и овцы целы, и твои нервы на месте.