Ошибка токена что это значит

Содержание

1. Неверное значение токена: в чем причина и как это исправить
2. Причины возникновения ошибки:
3. Как исправить ошибку:

Пользователи Инстаграм начали сталкиваться с неизвестной для них ошибкой. Давайте разберемся, в чем ее суть и как ее убрать. 

CSRF token missing or incorrect – что это?

Ошибка обычно возникает из-за:

• проблем с кэшем браузера или данными;
• устарелой версии приложения или ПО;
• настроек VPN или прокси. 

Поскольку со старта мы не знаем, что именно стало причиной ошибки CSRF token missing or incorrect instagram, мы разберем все сценарии ее устранения.

Чистим кэш

Простейший способ решить проблему – очистить кэш. Это может помочь избавиться от поврежденных файлов и данных, мешающих работе Инстаграм. 

Чистка кэша на мобильных телефонах

Удалим кэш приложения. На телефоне Android:

• Откройте настройки и нажмите «Приложения».

• В появившемся меню выберите Instagram.
• Коснитесь опции «Хранилище и кэш».

• Нажмите «Очистить кэш». 

Перезагрузите телефон и войдите в Instagram.

На iPhone почистить кэш можно только путем полного удаления и переустановки приложения. 

Удаляем кэш в браузере

Исправить csrf cookie not set Instagram можно очисткой кэша в браузере мобильного или ПК. 

Для очистки на Android проделайте те же шаги, но теперь для вашего браузера.

• Для iPhone откройте «Настройки» > «Safari».
• Пролистайте вниз, нажмите «Очистить историю и данные» и подтвердите действие

Чистим кэш в Google Chrome

• Чтобы зачистить кэш в десктопном Хроме, откройте его и нажмите на три точки. Кликните на «Дополнительные инструменты»

• «Удаление данных о просмотренных страницах» (или воспользуйтесь комбинацией Ctrl + Shift + Del).

• Выберите «Все время» или нужный диапазон. Также отметьте «Файлы cookie и другие данные сайтов» и «Изображения и другие файлы, сохраненные в кэше».
  Нажмите «Удалить данные».

Как исправить ошибку в браузере?

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

При помощи DevTools

Вариант 1

• Откройте инсту в браузере, нажмите F12 и выберите вкладку Network.

• Обновите страницу и слева в «Name» найдите www.instagram.com, нажмите. Правее во вкладке «Response» в коде найдите «csrf_token» (можно воспользоваться поиском). Скопируйте текст между «:» и запятой. 

• Теперь в DevTools открываем вкладку «Application» и слева в «Storage» > «Cookies» выбираем instagram.com. В открывшемся справа блоке нажимаем на пустую строку внизу, в поле «Name» вводим «csrftoken», а в «Value» – скопированный текст. Ставим галочку в «Secure». 

• По запросу вводим свои учетные данные, после чего ошибка с csrf token instagram должна пропасть.

Вариант 2

Снова-таки запускаем DevTools с помощью F12. В консоли веб-инспектора прописываем следующую строку:

• n=new Date;t=n.getTime();et=t+36E9;n.setTime(et);document.cookie=‘csrftoken=’+document.body.innerHTML.split(‘csrf_token’)[1].split(‘»‘)[2]+’;path=;domain=.instagram.com;expires=’+n.toUTCString();

• Нажимаем Enter. Готово.

Устраняем ошибку входа в instagram на телефоне:

Причиной проблемы «не могу войти в Инстаграм» может быть устарелая версия как самого приложения, так и ПО телефона. Рассмотрим варианты ее решения для каждой системы по-отдельности.

Android

Чтобы скачать обновления на телефон, откройте настройки. Далее перейдите к «Система» > «Обновление системы» (или «Об устройстве» > «Обновление ПО»). Нажмите «Обновить» и следуйте шагам на экране. 

Чтобы обновить приложение, откройте Google Play и в строке поиска найдите Instagram. Нажмите кнопку «Обновить», если она доступна.

iOS

Открываем «Настройки» > «Основные» > «Обновление ПО». Посмотрите, актуальная ли у вас версия iOS, и при необходимости нажмите «Установить сейчас» («Загрузить и установить»).

Для обновления Instagram проделайте аналогичные действия, что и для Android, но в AppStore.

Используем VPN для входа в Instagram

Причина, почему не работает Instagram, может скрываться в вашей локации. Для обхода местных блокировок понадобится сменить свое местоположение с помощью VPN. 

Рассмотрим сценарии решения проблемы с помощью надежного и проверенного сервиса. 

Десктоп впн-клиент

• Переходим на сайт Whoer VPN, выбираем тариф и регистрируем аккаунт (можно воспользоваться бесплатным триалом).

• Проверяем свой имейл и копируем предоставленный код доступа. 

• Скачиваем файл установки для своей системы (Windows, MacOS, Linux). 

• Инсталлируем программу, следуя шагам.

• Запускаем клиент, вводим скопированный код.

• Подключаемся к серверу (в платной версии они доступны в 21 стране!).

• Пробуем запустить Instagram.

Применяем впн-расширения

Если проблема не ушла, идем по другому пути – устанавливаем плагин для браузера.

Если вы используете Chrome, перейдите в его Интернет-магазин и вбейте «Whoer VPN» в поиск. Откройте страницу расширения и кликните «Установить». Нажмите на появившуюся иконку и подключитесь к серверу. Заново войдите в Инстаграм.

ВПН на телефоне

На мобильном: 

• Принудительно закройте Instagram.
• Откройте свой маркет приложений и найдите Whoer VPN через поиск. 
• На странице приложения нажмите «Установить». 

• После запуска доступно две опции «Попробовать бесплатно» и «У меня есть код доступа».

• Выберите первый вариант и пройдите free регистрацию или Введите ключ активации, если вы уже регистрировались ранее.
• После того как вы ввели код активации, выберите сервер и нажмите «Подключиться»
• Открывайте Instagram.

Строго соблюдайте поочередность шагов, иначе ошибка сохранится.

Связка ВПН + Прокси

Если ничего не помогло, пробуем перенаправить трафик одновременно через прокси-сервер и VPN.

Для этого устанавливаем и настраиваем прокси (используем инструкцию здесь или пользуемся браузерным расширением, предлагаемым самим провайдером). Запускаем VPN (плагин или настольную версию), а затем инсту.

Поздравляем, теперь вы знаете, как устранить ошибку Instagram, связанную с токеном csrf.

Сваям — профессиональный технический блоггер со степенью магистра компьютерных приложений, а также имеет опыт разработки под Android. Он убежденный поклонник Stock Android OS. Помимо технических блогов, он любит игры, путешествовать и играть на гитаре.

Если вы столкнулись с ошибкой «истек CSRF-токен» — читайте нашу статью. Из неё вы узнаете, как работает CSRF-token защита, и что делать, если CSRF токен истек.

Что такое CSRF

CSRF (англ. cross-site request forgery) — это межсайтовая подделка запроса. Это атака, которой может подвергаться любой веб-ресурс или веб-приложение. В первую очередь это касается сайтов, которые используют cookies, сертификаты авторизации и браузерную аутентификацию. В результате атаки страдают клиенты и репутация ресурса.

Вредоносный скрипт прячется в коде сайта или обычной ссылке. С помощью него мошенник получает доступ к конфиденциальной информации: платежным реквизитам, логину и паролю, личной переписке. После того как данные “в кармане”, хакер может изменить пароль, указать свой номер телефона или email, перевести деньги на свой счёт и многое другое.

Как работает CSRF-атака

Злоумышленник может использовать фишинговую ссылку — это наиболее распространенный способ обмана. В этом случае атака работает по следующей схеме:

CSRF-атаки случаются из-за того, что без специальных настроек сервер не может с точностью в 100% определить, кто именно выполняет действия со стороны пользователя. Он не может проверить, действительно ли на кнопку “оплатить” нажал тот пользователь, который изначально открыл страницу с оплатой. Хакеры активно используют этот люфт в безопасности HTTP-запросов и применяют вредоносные скрипты. Однако от атаки можно защититься с помощью CSRF-токенов. 

Что такое CSRF-token и как он работает

В общем понимании токен — это механизм, который позволяет идентифицировать пользователя или конкретную сессию для безопасного обмена информацией и доступа к информационным ресурсам. Токены помогают проверить личность пользователя (например, клиента, который онлайн получает доступ к банковскому счёту). Их используют как вместо пароля, так и вместе с ним. Токен — это в каком-то смысле электронный ключ.

CSRF-token — это максимально простой и результативный способ защиты сайта от CSRF-мошенников. Он работает так: сервер создаёт случайный ключ (он же токен) и отправляет его браузеру клиента. Когда браузер запрашивает у сервера информацию, сервер, прежде чем дать ответ, требует показать ключ и проверяет его достоверность. Если токен совпадает, сессия продолжается, а если нет — прерывается. Токен действителен только одну сессию — с новой сессией он обновляется.

Чтобы получить ответ от сервера, используются разные методы запроса. Условно они делятся на две категории: те, которые не изменяют состояние сервера (GET, TRACE, HEAD), и те, которые изменяют (PUT, PATCH, POST и DELETE). Последние имеют большую CSRF-уязвимость и поэтому должны быть защищены в первую очередь.

При создании и использовании токена должны соблюдаться следующие условия:

• нахождение в скрытом параметре;

• генерация с помощью генератора псевдослучайных чисел;

• ограниченное время жизни (одна сессия);

• уникальность для каждой транзакции;

• устойчивый к подбору размер (в битах);

• невозможно переиспользовать.

Типы токенов

Существует три основных типа токенов по способу генерации:

Помимо токенов, для защиты используется флаг Same-Site (большинство браузеров его поддерживает). Он работает напрямую для cookies и позволяет помечать куки конкретного домена. Сервер проверяет, содержатся ли нужные пометки в куках страницы, с которых происходит оплата или вносятся изменения. Если пометок нет — сессия прекращается.

Также в качестве меры защиты на страницах сайта настраивают форму с капчей. Это особенно актуально для страниц смены пароля или совершения денежных транзакций.

«Истек срок действия токена» или «CSRF-значение недопустимо»: что это значит и что делать

Даже при авторизации на сайтах, для которых настроена защита от атак, можно встретить следующие варианты сообщения об ошибке: «Недопустимое CSRF-значение»/«CSRF-токены не совпадают» или «Token expired» (в переводе — срок действия токена истек). Сообщение может отображаться как на английском, так и на русском. Пример ошибки при авторизации на сайте REG.RU:

Обычно ошибка возникает по двум основным причинам:

• сервер некорректно сгенерировал токен;

• срок токена истек — пользователь долго не совершал никаких действий на странице.

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

Иногда ошибка возникает из-за расширений защиты конфиденциальности или плагинов блокировки рекламы (например, Ghostery, UBlock Origin, Blur), которые настроены у пользователя. В этом случае можно отключить расширение. Также можно добавить сайт, на котором появилось сообщение, в список доверенных сайтов.

На примере сайта reg.ru покажем, что для этого нужно:

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

Заключение

Успешная атака CSRF позволяет хакеру действовать на сайте от имени другого зарегистрированного посетителя. Чтобы мошенник не добрался до конфиденциальных данных, для сайта нужно настроить один из типов CSRF-токенов. Токены позволяют серверу и браузеру безопасно обмениваться информацией в течение сессии. Однако даже на безопасных сайтах можно столкнуться с ошибкой «токен CSRF истек». В этом нет ничего страшного. Чтобы возобновить подключение, достаточно обновить страницу браузера.

В этой статье мы попытаемся устранить ошибку «CSRF-токен отсутствует или неверен», с которой сталкиваются пользователи Instagram при попытке войти в свою учетную запись.

Не так давно мне стали поступать сообщения о возникновении ошибки при входе в инстаграм с таким текстом CSRF token missing or incorrect inst**ram. Не так много информации есть в интернете на этот счет, а та что есть предлагает чуть ли ни взламывать сайт Пентагона в поисках этого токена.

Давайте же разберем в чем проблема, как ее устранить? А точнее , как это предлагают устранить другие и что сделал я.

По вопросам сотрудничества и консультаций пишите:

WhatsApp: 89818615659

https://t.me/target_vanya97

Что за ошибка ?

Ошибка возникает в основном, когда на устройстве используется старая версия приложения или же не обновлено ПО. Но в нашем случае это происходит из-за ВПН)

Как же ее устранить способ с интернета?

Взято с сайта qna.habr.

Откройте Instagram в браузере, далее откройте DevTools (кнопка F12), и перейдите во вкладку Network (№ 1). Теперь обновите страницу.В левой вкладке найдите запрос вида inst**ram.com (№2), нажмите на него и перейдите во вкладку Response (№3). В тексте ответа вам надо найти строчку csrf_token — для этого можете нажать CTRL+F и написать csrf_token (№4). Теперь скопируйте его значение (№5)

Далее переходите в том же DevTools во вкладку Application (№1) и в левой панели нажимаете на instagram.com в блоке Storage, пункт Cookies (№2). В правой панели откроются Куки. Теперь добавьте новый, нажав на пустую нижнюю строчку (№ 3) — достаточно ввести Name(csrftoken) и Value(скопированное значение) и указать галочку Secure. Должно получиться как на скрине №5.

После этого инстаграм запросит дважды логин-пароль, введете и сможете пользоваться веб-версией инсты.

Понятно?)

Мне не очень. Поэтому я сделал все по старинке:

Мой способ:

На самом деле все очень просто. Я установил прокси. Видимо Inst или РКН решили попытаться победить нашу смекалку и стал ограничивать пользователей с ВПН. Но голь на выдумки хитра так что просто скачайте прокси (я покупал тут :

Скачал расширение для хрома

Ну и все свел друг с другом. Вот и все. Никого не призываю делать именно так и напоминаю про то, что эти сайты под блокировкой РКН. Информация для общего развития.

Надеюсь моя статья оказалась Вам полезной. Донаты в благодарность приветствуются.

Если у вас остались какие то вопросы, или Вам нужно настроить рекламу пишите:

WhatsApp: 89818615659

https://t.me/target_vanya97

Из нашей статьи вы узнаете:

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

Ошибка: Сертификат ненадежен/Не удалось проверить статус отзыва

Ошибку можно заметить на вкладке «Сертификаты» непосредственно в панели управления Рутокен. Проблема возникает во время установки ЭЦП и связана с неполной настройкой. Речь про отсутствие специального корневого доверенного сертификата, который выдает удостоверяющий центр.

Первым шагом к устранению ошибки остается обновление комплекта драйверов. Если проблема не исчезла или последние у вас имеют актуальную версию, выполните действия по следующему алгоритму:

• выберите ваш сертификат в панели управления;
• нажмите кнопку «Свойства»;
• выберите вкладку «Путь сертификации».

Если в открывшемся дереве вы видите лишь ваш личный сертификат, то надо установить еще один, который был выдан в удостоверяющем центре, и сделать доверенным.

Ошибка: Rutoken перестает определяться (Windows 10)

Потенциально могут возникать периодические ошибки из-за недоступности сертификатов, невозможности запустить панель управления. Одновременно светодиод на токене горит, а сам Рутокен имеется в Диспетчере устройств. Подобная ситуация может быть связана со спецификой работы материнской платы компьютера, когда при переходе из энергосберегающего режима в штатный не происходит «пробуждения» токена. Выходом здесь станет его отключение либо повторное подключение Рутокена (для этого достаточно достать USB-токен из разъема и подключить опять).

В случае если ошибка не исчезла, обратитесь за консультацией в удостоверяющий центр, где вы оформили ЭЦП и приобрели Рутокен.

Ошибка: Рутокен плагин недоступен

Если у вас появляется ошибка «Плагин недоступен» при входе в личный кабинет сервиса Честный Знак, то это значит, что на компьютере не установлены криптографический плагин Рутокен Плагин или КриптоПро ЭЦП Browser plug-in.

Чтобы исправить данную ошибку вы можете воспользоваться нашей инструкцией по установке плагина RuToken.

Ошибка: Панель управления не видит Рутокен ЭЦП 2.0

Для решения проблемы выполните следующие действия:

• подключите токен к другому USB-разъему или компьютеру для оценки работоспособности;
• определите наличие устройства через «Диспетчер устройств» в разделе «Контроллеры USB»;
• проконтролируйте наличие доступа к веткам реестра
• HKEY_LOCAL_MACHINESOFTWAREMicrosoftCryptographyCalais и
• HKEY_LOCAL_MACHINESOFTWAREMicrosoftCryptographyCalaisReaders у текущего пользователя и Local Service (если необходимо, то добавьте), также убедитесь, что Служба «Смарт-карта» запущена от имени NT AUTHORITYLocalService («Пуск» — «Панель управления» — «Администрирование» — «Службы»).;
• проверьте количество считывателей в настройках панели управления (должно быть значение 1);
• переустановите комплект драйверов для исключения сбоя программного обеспечения.

Если ничего не помогло и ошибка осталась, обращайтесь в удостоверяющий центр «Астрал». Мы предлагаем услуги по генерации ЭЦП любых типов на выгодных условиях, а также комплексное техническое сопровождение. Для решения проблем мы готовы проконсультировать по телефону либо найти выход с помощью удаленного подключения к вашему компьютеру. Получить дополнительную информацию можно по телефону либо оставив заявку на сайте. Мы оперативно ответим и предоставим консультацию.

One day I was working on a feature at work. I had many branches created in JIRA tickets, so I wanted to open a bunch of PRs (Pull Requests) all at once in different tabs.

This is how I usually work – I have a lot of tabs open and this speeds things up, because I don’t need to wait for the next page to load.

But after I’d created the first PR in BitBucket and tried to go on to the next page, I was welcomed with an error message about an invalid CSRF token. This is a common problem with web applications that have CSRF protection.

So in this article you’ll learn what CSRF is and how to fix this error.

Table of contents:

• What is CSRF?
• Standard CSRF protection
• The Problem with Tokens
• Cross-tab Communication Solution
  • Sysend library
  • Broadcast Channel
• Conclusion

What is CSRF?

CSRF is an acronym for Cross-Site Request Forgery. It is a vector of attack that attackers commonly use to get into your system.

The way you usually protect against CSRF is to send a unique token generated by each HTTP request. If the token that is on the server doesn’t match with the one from the request, you show an error to the user.

Standard CSRF protection

This is one way you can protect against CSRF with a token:

const inital_token = '...';

const secure_fetch = (token => {
    const CSRF_HEADER = 'X-CSRF-TOKEN';
    return (url) => {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              [CSRF_HEADER]: token
            }
        });
        response.then(res => {
           token = res.headers[CSRF_HEADER]
        });
        return response;
    };
})(inital_token);

This code uses the fetch API to send and receive a secure token in HTTP headers. On the backed, you should generate the first initial token when the page loads. On the server, on each AJAX request, you should check to see if the token is valid.

The Problem with Tokens

This works fine unless you have more than one tab open. Each tab can send requests to the server, which will break this solution. And power users may not be able to use your application the way they want.

But there is a simple solution to this problem which is cross-tab communication.

Cross-tab Communication Solution

Sysend library

You can use the Sysend library, an open source solution that I’ve created specifically for this purpose. It simplifies cross-tabs communication.

If you want, you can use a native browser API like Broadcast Channel to do the same. More on how to do that later in this article.

But the Sysend library will work for browsers that don’t support Broadcast Channel. It also works in IE (it has some bugs, which is not a surprise). You may also need to support some old mobile browsers. It also has a much simpler API.

This is the simplest example:

let token;
sysend.on('token', new_token => {
    token = new_token;
});

// ...

sysend.broadcast('token', token);

And this is how you would use this library to fix CSRF protection:

const inital_token = '...';

const secure_fetch = (token => {
    const CSRF_HEADER = 'X-CSRF-TOKEN';
    const EVENT_NAME = 'csrf';
    sysend.on(EVENT_NAME, new_token => {
        // get new toke from different tab
        token = new_token;
    });
    return (url) => {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              [CSRF_HEADER]: token
            }
        });
        response.then(res => {
           token = res.headers[CSRF_HEADER];
           // send new toke to other tabs
           sysend.broadcast(EVENT_NAME, token); 
        });
        return response;
    };
})(inital_token);

All you have to do is to send and receive a single message from other tabs when sending the request. And your CSRF protected app will work on many tabs.

And that’s it. This will let advanced users use your app that has CSRF protection when they want to open many tabs.

Broadcast Channel

Here is the simplest possible example of using Broadcast Channel:

const channel = new BroadcastChannel('my-connection');
channel.addEventListener('message', (e) => {
    console.log(e.data); // 'some message'
});
channel.postMessage('some message');

So with this simple API you can do the same thing that we did before:

const inital_token = '...';

const secure_fetch = (token => {
    const CSRF_HEADER = 'X-CSRF-TOKEN';
    const channel = new BroadcastChannel('csrf-protection');
    channel.addEventListener('message', (e) => {
        // get new toke from different tab
    	token = e.data;
    });
    return (url) => {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              [CSRF_HEADER]: token
            }
        });
        response.then(res => {
           token = res.headers[CSRF_HEADER];
           // send new token to other tabs
           channel.postMessage(token);
        });
        return response;
    };
})(inital_token);

As you can see from the above example, Broadcast Channel doesn’t have any namespace for events. So if you want to send more than one type of event you need to create types of events.

Here is an example of using Broadcast Channel to do more than the CSRF protection fix we’ve discussed so far.

You can synchronize login and logout for your application. If you login into one tab, your other tabs will also sign you in. In the same way, you can synchronize the shopping cart in some e-commerce websites.

const channel = new BroadcastChannel('my-connection');
const CSRF = 'app/csrf';
const LOGIN = 'app/login';
const LOGOUT = 'app/logout';
let token;
channel.addEventListener('message', (e) => {
    switch (e.data.type) {
        case CSRF:
            token = e.data.payload;
            break;
        case LOGIN:
            const { user } = e.data.payload;
            autologin(user);
            break;
        case LOGOUT:
            logout();
            break;
    }
});

channel.postMessage({type: 'login', payload: { user } });

Conclusion

It’s great if you protect your app against attackers. But keep in mind how people will be using your application, too so you don’t make it unnecessarily hard to use. This applies not only to this particular problem.

The Sysend library is a simple way to communicate between open tabs in the same browser. And it can fix major issues with CSRF protection. The library has more features, and you can check its GitHub repo for more details.

Broadcast Channel is also not that complicated. If you don’t need to support old browsers or some older mobile devices, you can use this API. But if you need to support older browsers, or want to make your code simpler, you use can the sysend library.

If you want to see browser support for Broadcast Channel, you can see Can I Use.

---

---

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

One day I was working on a feature at work. I had many branches created in JIRA tickets, so I wanted to open a bunch of PRs (Pull Requests) all at once in different tabs.

This is how I usually work – I have a lot of tabs open and this speeds things up, because I don’t need to wait for the next page to load.

But after I’d created the first PR in BitBucket and tried to go on to the next page, I was welcomed with an error message about an invalid CSRF token. This is a common problem with web applications that have CSRF protection.

So in this article you’ll learn what CSRF is and how to fix this error.

Table of contents:

• What is CSRF?
• Standard CSRF protection
• The Problem with Tokens
• Cross-tab Communication Solution
  • Sysend library
  • Broadcast Channel
• Conclusion

What is CSRF?

CSRF is an acronym for Cross-Site Request Forgery. It is a vector of attack that attackers commonly use to get into your system.

The way you usually protect against CSRF is to send a unique token generated by each HTTP request. If the token that is on the server doesn’t match with the one from the request, you show an error to the user.

Standard CSRF protection

This is one way you can protect against CSRF with a token:

const inital_token = '...';

const secure_fetch = (token => {
    const CSRF_HEADER = 'X-CSRF-TOKEN';
    return (url) => {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              [CSRF_HEADER]: token
            }
        });
        response.then(res => {
           token = res.headers[CSRF_HEADER]
        });
        return response;
    };
})(inital_token);

This code uses the fetch API to send and receive a secure token in HTTP headers. On the backed, you should generate the first initial token when the page loads. On the server, on each AJAX request, you should check to see if the token is valid.

The Problem with Tokens

This works fine unless you have more than one tab open. Each tab can send requests to the server, which will break this solution. And power users may not be able to use your application the way they want.

But there is a simple solution to this problem which is cross-tab communication.

Cross-tab Communication Solution

Sysend library

You can use the Sysend library, an open source solution that I’ve created specifically for this purpose. It simplifies cross-tabs communication.

If you want, you can use a native browser API like Broadcast Channel to do the same. More on how to do that later in this article.

But the Sysend library will work for browsers that don’t support Broadcast Channel. It also works in IE (it has some bugs, which is not a surprise). You may also need to support some old mobile browsers. It also has a much simpler API.

This is the simplest example:

let token;
sysend.on('token', new_token => {
    token = new_token;
});

// ...

sysend.broadcast('token', token);

And this is how you would use this library to fix CSRF protection:

const inital_token = '...';

const secure_fetch = (token => {
    const CSRF_HEADER = 'X-CSRF-TOKEN';
    const EVENT_NAME = 'csrf';
    sysend.on(EVENT_NAME, new_token => {
        // get new toke from different tab
        token = new_token;
    });
    return (url) => {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              [CSRF_HEADER]: token
            }
        });
        response.then(res => {
           token = res.headers[CSRF_HEADER];
           // send new toke to other tabs
           sysend.broadcast(EVENT_NAME, token); 
        });
        return response;
    };
})(inital_token);

All you have to do is to send and receive a single message from other tabs when sending the request. And your CSRF protected app will work on many tabs.

And that’s it. This will let advanced users use your app that has CSRF protection when they want to open many tabs.

Broadcast Channel

Here is the simplest possible example of using Broadcast Channel:

const channel = new BroadcastChannel('my-connection');
channel.addEventListener('message', (e) => {
    console.log(e.data); // 'some message'
});
channel.postMessage('some message');

So with this simple API you can do the same thing that we did before:

const inital_token = '...';

const secure_fetch = (token => {
    const CSRF_HEADER = 'X-CSRF-TOKEN';
    const channel = new BroadcastChannel('csrf-protection');
    channel.addEventListener('message', (e) => {
        // get new toke from different tab
    	token = e.data;
    });
    return (url) => {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              [CSRF_HEADER]: token
            }
        });
        response.then(res => {
           token = res.headers[CSRF_HEADER];
           // send new token to other tabs
           channel.postMessage(token);
        });
        return response;
    };
})(inital_token);

As you can see from the above example, Broadcast Channel doesn’t have any namespace for events. So if you want to send more than one type of event you need to create types of events.

Here is an example of using Broadcast Channel to do more than the CSRF protection fix we’ve discussed so far.

You can synchronize login and logout for your application. If you login into one tab, your other tabs will also sign you in. In the same way, you can synchronize the shopping cart in some e-commerce websites.

const channel = new BroadcastChannel('my-connection');
const CSRF = 'app/csrf';
const LOGIN = 'app/login';
const LOGOUT = 'app/logout';
let token;
channel.addEventListener('message', (e) => {
    switch (e.data.type) {
        case CSRF:
            token = e.data.payload;
            break;
        case LOGIN:
            const { user } = e.data.payload;
            autologin(user);
            break;
        case LOGOUT:
            logout();
            break;
    }
});

channel.postMessage({type: 'login', payload: { user } });

Conclusion

It’s great if you protect your app against attackers. But keep in mind how people will be using your application, too so you don’t make it unnecessarily hard to use. This applies not only to this particular problem.

The Sysend library is a simple way to communicate between open tabs in the same browser. And it can fix major issues with CSRF protection. The library has more features, and you can check its GitHub repo for more details.

Broadcast Channel is also not that complicated. If you don’t need to support old browsers or some older mobile devices, you can use this API. But if you need to support older browsers, or want to make your code simpler, you use can the sysend library.

If you want to see browser support for Broadcast Channel, you can see Can I Use.

---

---

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started