#reactjs #authentication #jwt #refresh-token
#reactjs #аутентификация #jwt #обновить-токен
Вопрос:
Мое приложение содержит React JS во внешнем интерфейсе и Fast Api во внутреннем интерфейсе. Я использую аутентификацию токена, генерирую токен JWT и отправляю обратно клиенту, и я сохраняю токен JWT и идентификатор пользователя на стороне клиента (локальное хранилище) и должен отправлять токен вместе с каждым запросом
Код
export const handleAuthentication = (data) => {
localStorage.setItem("userID", data.user_id);
localStorage.setItem("subID", data.user_sub);
localStorage.setItem("access_token", data.access_token);
localStorage.setItem("refresh_token", data.refresh_token);
localStorage.setItem("is_authenticated", "true");
localStorage.setItem("session_expired", "false");
window.location.replace("/success");
};
Но я где-то читал, что локальное хранилище небезопасно. Также есть много сообщений, на которые я ссылался, но я не получаю надлежащего подхода. Любые предложения были бы полезны!
Ответ №1:
Cookie — лучший вариант, просто потому, что вы можете иметь гораздо более точный контроль в cookie, отличный от localStorage или sessionStorage. Некоторые из них —
Срок действия
Вы можете определить время жизни вашего файла cookie
Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;
Ограничить доступ
Файл cookie с атрибутом Secure отправляется на сервер только с зашифрованным запросом по протоколу HTTPS, никогда с незащищенным HTTP (за исключением локального хоста), и поэтому злоумышленник «человек посередине» не может легко получить к нему доступ
Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
Атрибут SameSite
Атрибут SameSite позволяет серверам требовать, чтобы cookie не отправлялся с запросами из разных источников (где сайт определяется регистрируемым доменом), что обеспечивает некоторую защиту от атак подделки межсайтовых запросов (CSRF).
Set-Cookie: mykey=myvalue; SameSite=Strict
Комментарии:
1. Спасибо за ответ. Где я должен установить файл cookie? Во внутренней части или во внешней части? И должен ли он содержать токен JWT и идентификатор пользователя в моем случае?
2. Вы можете сохранить свой JWT в cookie вашего интерфейсного приложения (React) и можете использовать глобальную переменную axios для установки ее в заголовок. Таким образом, вам не нужно прикреплять его к каждому запросу, который вы сделали из пользовательского интерфейса
3. Итак, в ответе от сервера я должен правильно прикрепить файл cookie? итак, как это будет установлено во внешнем интерфейсе? Автоматически?
4. При успешном входе в систему вы получите токен JWT, сохраните токен в cookie в своем приложении react
5. @AaminKhan Я следую тому же методу, который вы предложили, но у меня есть 1 сомнение. Я использую флаг HttpOnly в своем файле cookie, который я отправляю с сервера клиенту. Я читал, что он защищает от XSS-атак. Итак, если установлен флаг HttpOnly, как мне получить доступ к моему jwt во внешнем интерфейсе (на стороне клиента)? Я могу использовать
axios.deaults.headers.commonего для установки после получения ответа при первом входе в систему. Но если пользователь обновляет или открывает приложение на новой вкладке, я теряю этот заголовок, и пользователь выходит из системы.