Что лучше localstorage cookie
LocalStorage vs Cookies: все, что нужно знать о безопасном хранении токенов JWT во Front-End
В статье даются рекомендации по хранению и использованию JWT токенов. Если кратко резюмировать статью, то в ней рекомендуется полученные от бекенда access токены хранить в приложение, а refresh токены в куках. А вот если хотите узнать почему именно такие рекомендации читайте статью.
Токены JWT замечательны, но как их надежно хранить на фронтенде? Мы рассмотрим плюсы и минусы LocalStorage и cookie для хранения JWT.
Краткий обзор Access token и Refresh token
Токены доступа (Access token) обычно являются недолговечными токенами JWT, подписанными сервером и включенными в каждый HTTP-запрос к серверу для авторизации запроса.
Токены обновления (Refresh token) обычно представляют собой долговечные зашифрованные токенами JWT, хранящиеся в базе данных, которые используются для получения нового токена доступа по истечении срока его действия.
Где лучше хранить свои токены?
Существует два распространенных способа хранения токенов: в localStorage и в cookie. Есть много споров о том, какой из них лучше, но большинство людей склоняются к cookie из-за большей безопасности.
Давайте рассмотрим это сравнение чуть более подробнее.
Local Storage
Плюсы: Это удобно.
Минусы: Такой способ уязвим к XSS атакам.
Атака XSS происходит, когда злоумышленник может запустить свой скрипт JavaScript на вашем сайте во время посещения его другим пользователем. Это означает, что злоумышленник сможет получит доступ к токену доступа, который вы сохранили в localStorage.
Cookies
Плюсы: Файл cookie может быть не доступен через JavaScript, поэтому он не так уязвим для атак XSS, как localStorage.
Минусы: В зависимости от варианта использования иногда вы не сможете хранить свои токены в файлах cookie..
Кратко о XSS атаках
Итак мы уже сказали что local storage уязвим, так как он легко доступен с помощью JavaScript, и злоумышленник может получить access token и использовать его. Однако, хотя cookie с httpOnly недоступны из JavaScript, это не означает, что с помощью cookie вы полностью защищены от XSS атак.
Если злоумышленник может запустить JavaScript в вашем приложении, он все равно сможет отправить HTTP-запрос на ваш сервер получив таким образом все токены. Но для злоумышленника это менее удобно, потому что он не сможет прочитать содержимое токена, хотя это и не всегда нужно.
Cookies и CSRF Атаки
CSRF Attack — это атака, которая позволяет сделать запрос от имени пользователя но без его ведома. Например, если веб-сайт принимает запрос на изменение электронной почты через такой запрос:
То злоумышленник может легко создать форму на вредоносном веб-сайте, которая отправит POST запрос на https://site.com/email/change со скрытым полем электронной почты, и cookie с токенами будут автоматически включены в этот запрос.
Однако это можно легко исправить, используя флаг cookie sameSite и добавив anti-CSRF token.
Вывод
Хотя куки все еще имеют некоторые уязвимости, они предпочтительнее по сравнению с localStorage, когда их применение возможно. И вот почему?
Не храните идентификаторы сеанса в localStorage, так как данные всегда доступны через JavaScript. Файлы cookie могут снизить этот риск, используя флаг httpOnly.
OWASP: HTML5 Security Cheat Sheet
Итак, как мне использовать куки для сохранения моих токенов OAuth 2.0?
Напомним, вот несколько способов хранения ваших токенов:
Мы рассмотрим, Вариант 3, так как он предлагает лучшие преимущества из трех вариантов.
Сохранять Access Token в памяти приложения а Refresh Token в cookie.
Шаг 1: Пользователь получает Access Token и Refresh Token когда проходит аутентификацию.
После аутентификации пользователя Сервер авторизации отдает пользователю access_token и refresh_token. Access_token может быть включен в тело ответа, refresh_token должен быть включен только в cookie.
Свойства токена в cookie:
Шаг 2: Сохраните Access Token в памяти
Хранение токена в памяти означает, что вы поместили этот токен доступа в соответствующую переменную в своем приложение. Да, это означает, что access token исчезнет, если пользователь переключит вкладки или обновит страницу. Вот зачем у нас есть refresh token.
Шаг 3: Обновляйте access token, используя refresh token
Когда access token token пропадет или срок его действия истечет, используйте серверное API для получения нового токена используя refresh token, который был сохранен в cookie в шаге 1, и будет включен в каждый запрос (то есть сервер получит его через cookie ). После получения нового access token сможете использовать его для своих запросов API.
Это означает, что ваш токен JWT может быть больше 4 КБ, и вы также можете поместить его в заголовок авторизации.
Заключение
Если вы создаете механизм авторизации для своего веб-сайта или мобильного приложения, эти статьи могут помочь:
LocalStorage vs Cookies: все, что нужно знать о безопасном хранении токенов JWT во Front-End
В переводе статьи LocalStorage vs Cookies: All You Need To Know About Storing JWT Tokens Securely in The Front-End, опубликованном webdevblog.ru, даются рекомендации по хранению и использованию JWT-токенов. Если кратко резюмировать статью, то в ней рекомендуется полученные от бекенда access токены хранить в приложение, а refresh токены — в куках. А вот если хотите узнать, почему именно такие рекомендации — читайте статью.
Токены JWT замечательны, но как их надежно хранить на фронтенде? Мы рассмотрим плюсы и минусы LocalStorage и cookie для хранения JWT.
Краткий обзор Access token и Refresh token
Токены доступа (Access token) обычно являются недолговечными токенами JWT, подписанными сервером и включенными в каждый HTTP-запрос к серверу для авторизации запроса.
Токены обновления (Refresh token) обычно представляют собой долговечные зашифрованные токенами JWT, хранящиеся в базе данных, которые используются для получения нового токена доступа по истечении срока его действия.
Где лучше хранить свои токены?
Существует два распространенных способа хранения токенов: в localStorage и в cookie. Есть много споров о том, какой из них лучше, но большинство людей склоняются к cookie из-за большей безопасности.
Давайте рассмотрим это сравнение чуть более подробнее.
Local Storage
Плюсы: Это удобно.
Минусы: Такой способ уязвим к XSS атакам.
Атака XSS происходит, когда злоумышленник может запустить свой скрипт JavaScript на вашем сайте во время посещения его другим пользователем. Это означает, что злоумышленник сможет получит доступ к токену доступа, который вы сохранили в localStorage.
Cookies
Плюсы: Файл cookie может быть не доступен через JavaScript, поэтому он не так уязвим для атак XSS, как localStorage.
Минусы: В зависимости от варианта использования иногда вы не сможете хранить свои токены в файлах cookie..
Кратко о XSS атаках
Итак мы уже сказали что local storage уязвим, так как он легко доступен с помощью JavaScript, и злоумышленник может получить access token и использовать его. Однако, хотя cookie с httpOnly недоступны из JavaScript, это не означает, что с помощью cookie вы полностью защищены от XSS атак.
Если злоумышленник может запустить JavaScript в вашем приложении, он все равно сможет отправить HTTP-запрос на ваш сервер получив таким образом все токены. Но для злоумышленника это менее удобно, потому что он не сможет прочитать содержимое токена, хотя это и не всегда нужно.
Cookies и CSRF Атаки
CSRF Attack — это атака, которая позволяет сделать запрос от имени пользователя но без его ведома. Например, если веб-сайт принимает запрос на изменение электронной почты через такой запрос:POST /email/change HTTP/1.1Host: site.comContent-Type: application/x-www-form-urlencodedContent-Length: 50Cookie: session=abcdefghijklmnopqrstuemail=myemail.example.com
То злоумышленник может легко создать форму на вредоносном веб-сайте, которая отправит POST запрос на https://site.com/email/change со скрытым полем электронной почты, и cookie с токенами будут автоматически включены в этот запрос.
Однако это можно легко исправить, используя флаг cookie sameSite и добавив anti-CSRF token.
Вывод
Хотя куки все еще имеют некоторые уязвимости, они предпочтительнее по сравнению с localStorage, когда их применение возможно. И вот почему?
Итак, как мне использовать куки для сохранения моих токенов OAuth 2.0?
Напомним, вот несколько способов хранения ваших токенов:
Мы рассмотрим, Вариант 3, так как он предлагает лучшие преимущества из трех вариантов.
Сохранять Access Token в памяти приложения а Refresh Token в cookie.
Шаг 1: Пользователь получает Access Token и Refresh Token когда проходит аутентификацию.
После аутентификации пользователя Сервер авторизации отдает пользователю access_token и refresh_token. Access_token может быть включен в тело ответа, refresh_token должен быть включен только в cookie.
Свойства токена в cookie:
Шаг 2: Сохраните Access Token в памяти
Хранение токена в памяти означает, что вы поместили этот токен доступа в соответствующую переменную в своем приложение. Да, это означает, что access token исчезнет, если пользователь переключит вкладки или обновит страницу. Вот зачем у нас есть refresh token.
Шаг 3: Обновляйте access token, используя refresh token
Когда access token token пропадет или срок его действия истечет, используйте серверное API для получения нового токена используя refresh token, который был сохранен в cookie в шаге 1, и будет включен в каждый запрос (то есть сервер получит его через cookie ). После получения нового access token сможете использовать его для своих запросов API.
Это означает, что ваш токен JWT может быть больше 4 КБ, и вы также можете поместить его в заголовок авторизации.
Заключение
Если вы создаете механизм авторизации для своего веб-сайта или мобильного приложения, эти статьи могут помочь:
Локальное хранилище против файлов cookie
Я хочу уменьшить время загрузки на своих сайтах, переместив все файлы cookie в локальное хранилище, так как они, похоже, имеют одинаковую функциональность. Существуют ли какие-либо плюсы/минусы (особенно с точки зрения производительности) в использовании локального хранилища для замены функций cookie, за исключением очевидных проблем с совместимостью?
ОТВЕТЫ
Ответ 1
Cookies и локальное хранилище служат для разных целей. Файлы cookie в основном предназначены для чтения серверной стороны, локальное хранилище может быть прочитано только на стороне клиента. Итак, вопрос в вашем приложении, кому нужны эти данные; клиента или сервера?
Если это ваш клиент (ваш JavaScript), то обязательно переключитесь. Вы теряете пропускную способность, отправляя все данные в каждый HTTP-заголовок.
Если это ваш сервер, локальное хранилище не так полезно, потому что вам придется пересылать данные как-то (с помощью полей Ajax или скрытых форм или чего-то еще). Это может быть хорошо, если серверу требуется только небольшое подмножество данных для каждого запроса.
Вы хотите оставить cookie сеанса как cookie в любом случае.
В соответствии с техническим отличием, а также моим пониманием:
Ответ 2
В контексте JWT Stormpath написал довольно полезную статью, в которой излагаются возможные способы их хранения и преимущества (преимущества), относящиеся к каждому методу.
В нем также есть краткий обзор атак XSS и CSRF, и как вы можете бороться с ними.
Я добавил несколько коротких фрагментов статьи ниже, в случае, если их статья отключена/их сайт не работает.
Локальное хранилище
Проблемы:
Веб-хранилище (localStorage/sessionStorage) доступно через JavaScript в том же домене. Это означает, что любой JavaScript, работающий на вашем сайте, будет иметь доступ к веб-хранилищу, и из-за этого он может быть уязвим для атак на межсайтовый скриптинг (XSS). XSS в двух словах является типом уязвимости, когда злоумышленник может добавить JavaScript, который будет запущен на вашей странице. Базовые атаки XSS пытаются внедрить JavaScript через входы форм, где злоумышленник ставит предупреждение ( «Вы взломали» ); в форму, чтобы увидеть, запущен ли он браузером и может быть просмотрен другими пользователями.
Профилактика:
Чтобы предотвратить XSS, общий ответ заключается в том, чтобы убежать и закодировать все ненадежные данные. Но это далеко не полная история. В 2015 году современные веб-приложения используют JavaScript, размещенный на CDN или вне инфраструктуры. Современные веб-приложения включают сторонние библиотеки JavaScript для тестирования A/B, анализа воронки/рынка и рекламы. Мы используем менеджеров пакетов, таких как Bower, для импорта кода других людей в наши приложения.
В качестве механизма хранения Web Storage не обеспечивает безопасность стандартов при передаче. Тот, кто читает Web Storage и использует его, должен выполнять свою должную осмотрительность, чтобы гарантировать, что они всегда отправляют JWT через HTTPS и никогда не HTTP.
Cookies
Проблемы:
Cookies, используемые с флагом cookie HttpOnly, недоступны с помощью JavaScript и невосприимчивы к XSS. Вы также можете установить флаг Secure cookie, чтобы гарантировать, что cookie отправляется только через HTTPS. Это одна из основных причин, по которой куки были использованы в прошлом для хранения токенов или данных сеанса. Современные разработчики не решаются использовать файлы cookie, поскольку они традиционно требуют сохранения состояния на сервере, тем самым нарушая лучшие практики RESTful. Куки файлы в качестве механизма хранения не требуют сохранения состояния на сервере, если вы храните JWT в файле cookie. Это связано с тем, что JWT инкапсулирует все, что сервер должен обслуживать.
Профилактика:
CSRF можно предотвратить, используя синхронизированные шаблоны токенов. Эта звучит сложно, но все современные веб-фреймворки поддерживают это.
Например, у AngularJS есть решение проверить, что файл cookie доступный только для вашего домена. Прямо из документов AngularJS:
Использование рамок веб-приложений Защита CSRF делает куки файлы cookie твердый для хранения JWT. CSRF также можно частично предотвратить проверка заголовка HTTP Referer и Origin из вашего API. CSRF атаки будут иметь заголовки Referer и Origin, которые не связаны с ваше приложение.
У них также есть полезная статья о том, как наилучшим образом спроектировать и реализовать JWT в отношении самой структуры маркера: https://stormpath.com/blog/jwt-the-right-way/
Ответ 3
С localStorage веб-приложения могут хранить данные локально в браузере пользователя. До HTML5 данные приложения должны были храниться в файлах cookie, включенных в каждый запрос к серверу. Большие объемы данных могут храниться локально, не влияя на производительность сайта. Хотя localStorage более современен, у обоих методов есть свои плюсы и минусы.
Печенье
Локальное хранилище
5 МБ хранилища на домен (что 5120 КБ)
«Значения localStorage на защищенных (SSL) страницах изолированы», поскольку кто-то заметил, что помните, что localStorage будет недоступен, если вы переключитесь с защищенного протокола «http» на «https», где файл cookie все еще будет доступен. Это очень важно знать, если вы работаете с защищенными протоколами.
Ответ 4
Я действительно не вижу огромной разницы в cookie и локальном хранилище. Кроме того, вы должны больше беспокоиться о проблемах совместимости: не все браузеры даже начали поддерживать новые API-интерфейсы HTML5, поэтому файлы cookie будут наилучшим выбором для скорости и совместимости.
Ответ 5
Локальное хранилище может хранить до 5 МБ автономных данных, тогда как сеанс также может хранить до 5 МБ данных. Но куки могут хранить только 4 КБ данных в текстовом формате.
LOCAl и Session хранят данные в формате JSON, что позволяет легко их анализировать. Но данные куки в строковом формате.
Ответ 6
Стоит также отметить, что localStorage нельзя использовать, когда пользователи localStorage в «приватном» режиме в некоторых версиях мобильного Safari.
Примечание. Начиная с iOS 5.1, Safari Mobile хранит данные localStorage в папке кэша, которая может периодически очищаться по указанию ОС, как правило, если места недостаточно. Режим приватного просмотра Safari Mobile также полностью запрещает запись в localStorage.
LocalStorage vs Cookies: все, что нужно знать о безопасном хранении токенов JWT во Front-End
В переводе статьи LocalStorage vs Cookies: All You Need To Know About Storing JWT Tokens Securely in The Front-End, опубликованном webdevblog.ru, даются рекомендации по хранению и использованию JWT-токенов. Если кратко резюмировать статью, то в ней рекомендуется полученные от бекенда access токены хранить в приложение, а refresh токены — в куках. А вот если хотите узнать, почему именно такие рекомендации — читайте статью.
Токены JWT замечательны, но как их надежно хранить на фронтенде? Мы рассмотрим плюсы и минусы LocalStorage и cookie для хранения JWT.
Краткий обзор Access token и Refresh token
Токены доступа (Access token) обычно являются недолговечными токенами JWT, подписанными сервером и включенными в каждый HTTP-запрос к серверу для авторизации запроса.
Токены обновления (Refresh token) обычно представляют собой долговечные зашифрованные токенами JWT, хранящиеся в базе данных, которые используются для получения нового токена доступа по истечении срока его действия.
Где лучше хранить свои токены?
Существует два распространенных способа хранения токенов: в localStorage и в cookie. Есть много споров о том, какой из них лучше, но большинство людей склоняются к cookie из-за большей безопасности.
Давайте рассмотрим это сравнение чуть более подробнее.
Local Storage
Плюсы: Это удобно.
Минусы: Такой способ уязвим к XSS атакам.
Атака XSS происходит, когда злоумышленник может запустить свой скрипт JavaScript на вашем сайте во время посещения его другим пользователем. Это означает, что злоумышленник сможет получит доступ к токену доступа, который вы сохранили в localStorage.
Cookies
Плюсы: Файл cookie может быть не доступен через JavaScript, поэтому он не так уязвим для атак XSS, как localStorage.
Минусы: В зависимости от варианта использования иногда вы не сможете хранить свои токены в файлах cookie..
Кратко о XSS атаках
Итак мы уже сказали что local storage уязвим, так как он легко доступен с помощью JavaScript, и злоумышленник может получить access token и использовать его. Однако, хотя cookie с httpOnly недоступны из JavaScript, это не означает, что с помощью cookie вы полностью защищены от XSS атак.
Если злоумышленник может запустить JavaScript в вашем приложении, он все равно сможет отправить HTTP-запрос на ваш сервер получив таким образом все токены. Но для злоумышленника это менее удобно, потому что он не сможет прочитать содержимое токена, хотя это и не всегда нужно.
Cookies и CSRF Атаки
CSRF Attack — это атака, которая позволяет сделать запрос от имени пользователя но без его ведома. Например, если веб-сайт принимает запрос на изменение электронной почты через такой запрос:POST /email/change HTTP/1.1Host: site.comContent-Type: application/x-www-form-urlencodedContent-Length: 50Cookie: session=abcdefghijklmnopqrstuemail=myemail.example.com
То злоумышленник может легко создать форму на вредоносном веб-сайте, которая отправит POST запрос на https://site.com/email/change со скрытым полем электронной почты, и cookie с токенами будут автоматически включены в этот запрос.
Однако это можно легко исправить, используя флаг cookie sameSite и добавив anti-CSRF token.
Вывод
Хотя куки все еще имеют некоторые уязвимости, они предпочтительнее по сравнению с localStorage, когда их применение возможно. И вот почему?
Не храните идентификаторы сеанса в localStorage, так как данные всегда доступны через JavaScript. Файлы cookie могут снизить этот риск, используя флаг httpOnly.
OWASP: HTML5 Security Cheat Sheet
Итак, как мне использовать куки для сохранения моих токенов OAuth 2.0?
Напомним, вот несколько способов хранения ваших токенов:
Мы рассмотрим, Вариант 3, так как он предлагает лучшие преимущества из трех вариантов.
Сохранять Access Token в памяти приложения а Refresh Token в cookie.
Шаг 1: Пользователь получает Access Token и Refresh Token когда проходит аутентификацию.
После аутентификации пользователя Сервер авторизации отдает пользователю access_token и refresh_token. Access_token может быть включен в тело ответа, refresh_token должен быть включен только в cookie.
Свойства токена в cookie:
Шаг 2: Сохраните Access Token в памяти
Хранение токена в памяти означает, что вы поместили этот токен доступа в соответствующую переменную в своем приложение. Да, это означает, что access token исчезнет, если пользователь переключит вкладки или обновит страницу. Вот зачем у нас есть refresh token.
Шаг 3: Обновляйте access token, используя refresh token
Когда access token token пропадет или срок его действия истечет, используйте серверное API для получения нового токена используя refresh token, который был сохранен в cookie в шаге 1, и будет включен в каждый запрос (то есть сервер получит его через cookie ). После получения нового access token сможете использовать его для своих запросов API.
Это означает, что ваш токен JWT может быть больше 4 КБ, и вы также можете поместить его в заголовок авторизации.
Заключение
Если вы создаете механизм авторизации для своего веб-сайта или мобильного приложения, эти статьи могут помочь:
Cookies vs. LocalStorage: What’s the difference?
For a long time, cookies were the main way to store information about users visiting your app or website. They were used to record stateful elements like shopping cart items or options changed by a user. They were also used to remember user browsing habits or to keep a user logged in while they went from page to page. Then, HTML5 appeared on the scene and introduced LocalStorage as another data storage option. This new Javascript object (along with SessionStorage) boasted a much large storage capacity than cookies at a whopping 5MB. In this article, we will compare and contrast cookies and LocalStorage.
Cookies — Small, but Mighty
First, we’ll start by exploring basic information about cookies. We’ll also go over some of their pros and cons. So, what are cookies? According to whatarecookies.com, they are small text files that are placed on a user’s computer by a website. They hold a very small amount of data at a maximum capacity of 4KB. Cookies are used in different ways, such as in storing the pages visited on a site or a user’s login information. They are limited in that they can only store strings.
Many secure websites employ cookies to validate their users’ identities after they’ve logged in to prevent them from having to re-enter their credentials on every page. Another use for cookies is to customize or adjust user experience based on limited browsing history on the site.
Two Types of Cookies
There are two types of cookies: persistent cookies and session cookies. Session cookies do not contain an expiration date. Instead, they are stored only as long as the browser or tab is open. As soon as the browser is closed, they are permanently lost. This type of cookie might be used to store a banking user’s credentials while they are navigating within their bank’s website since their information would be forgotten as soon as the tab is closed.
Persistent cookies do have an expiration date. These cookies are stored on the user’s disk until the expiration date and then permanently deleted. They can be used for other activities such as recording a user’s habits while on a particular website in order to customize their experience every time they visit.
LocalStorage — A More Permanent Solution
After HTML5 came out, many uses of cookies were replaced by the use of LocalStorage. This is because LocalStorage has a lot of advantages over cookies. One of the most important differences is that unlike with cookies, data does not have to be sent back and forth with every HTTP request. This reduces the overall traffic between the client and the server and the amount of wasted bandwidth. This is because data is stored on the user’s local disk and is not destroyed or cleared by the loss of an internet connection. Also, as mentioned before, LocalStorage can hold up to 5MB of information. This is a whole lot more than the 4KB that cookies hold.
LocalStorage behaves more like persistent cookies in terms of expiration. Data is not automatically destroyed unless it is cleared through Javascript code. This can be good for larger bits of data that need to be stored for longer periods of time. Also, with LocalStorage you can not only store strings but also Javascript primitives and objects.
Uses of LocalStorage
In my back-end web development course, we discussed cases where LocalStorage would be superior to cookies. An example of a good use of LocalStorage might be in an application used in regions without a persistent internet connection. My course instructor, Dani Roxberry, built such an application in the past and used LocalStorage to protect and store data collected in areas with spotty WiFi or data connections.
In order for this to be a good use of LocalStorage, the threat level of the data stored in this situation would have to be very low. To protect client privacy, it would be good to upload the data when connection is re-established and then delete the locally stored version. Additionally, it would be advantageous to encrypt data that was being stored so that it would not be easily hacked. In our class discussion, we also established that highly vulnerable data, such as financial information, could not be stored or secured properly using LocalStorage in this way.
Conclusion
While these storage options have their positives and negatives, they both have applications in modern web development. Cookies are smaller and send server information back with every HTTP request, while LocalStorage is larger and can hold information on the client side.
When you make your next application, think about these various uses and decide which type of storage is right for you.