Cookies, session storage, локальное хранилище
Cookies, Session Storage, Локальное хранилище
Введение
Браузер умеет хранить данные на стороне клиента. Это нужно для сессий, предпочтений пользователя, кэширования данных и многого другого. Тестировщику важно знать три основных типа хранилища: cookies, sessionStorage и localStorage — и уметь работать с ними через DevTools.
Три типа хранилища браузера
| Характеристика | Cookies | Session Storage | Local Storage |
|---|---|---|---|
| Время жизни | До истечения Expires или вручную | До закрытия вкладки | Пока не очищено вручную |
| Отправляется на сервер | Да, с каждым запросом | Нет | Нет |
| Объём | ~4 KB | ~5-10 MB | ~5-10 MB |
| Доступ через JS | Да (если не HttpOnly) | Да | Да |
| Область видимости | Domain + Path | Только текущая вкладка | Весь origin |
Cookies (Куки)
Куки — небольшие пары ключ-значение, которые браузер автоматически отправляет на сервер с каждым запросом.
Для чего используются:
- Хранение сессионного токена (авторизация)
- Запоминание настроек (язык, тема)
- Отслеживание пользователей (аналитика)
Атрибуты cookie
| Атрибут | Описание | Влияние на безопасность |
|---|---|---|
HttpOnly | JS не может прочитать cookie | Защищает от XSS — скрипт не украдёт токен |
Secure | Cookie отправляется только по HTTPS | Защищает от перехвата |
SameSite=Strict | Cookie не отправляется с других сайтов | Защищает от CSRF |
SameSite=Lax | Cookie отправляется при навигации с других сайтов | Баланс безопасности |
Expires | Дата истечения | После этой даты cookie удаляется |
Domain | Домен, для которого действует cookie | Поддомены могут видеть cookie |
Session Storage
sessionStorage хранит данные только пока открыта вкладка. При закрытии вкладки данные удаляются.
Для чего используется:
- Временные данные текущей сессии
- Данные многошаговой формы (wizard)
- Состояние, которое не нужно сохранять
Важно: данные не передаются между вкладками одного сайта.
Local Storage
localStorage хранит данные без ограничений по времени (пока пользователь не очистит вручную или сайт не удалит их программно).
Для чего используется:
- Настройки интерфейса (тема, язык, размер шрифта)
- Кэшированные данные
- Данные корзины покупок (для неавторизованных пользователей)
Как проверять хранилище в DevTools
Открой DevTools → вкладка Application (Chrome) или Storage (Firefox):
Application
├── Cookies ← все cookies для текущего сайта
├── Session Storage ← данные sessionStorage
└── Local Storage ← данные localStorage
Там можно:
- Просмотреть все ключи и значения
- Удалить отдельные записи
- Изменить значение прямо в DevTools
- Нажать "Clear All" для полной очистки
Тестирование хранилища
Сценарии для cookies
| Сценарий | Ожидаемый результат |
|---|---|
| Удалить session-cookie | Пользователь разлогинивается |
| Изменить значение токена | Сервер отвергает невалидный токен (401) |
| Очистить все cookies | Сессия сбрасывается, настройки теряются |
| Проверить Secure-флаг | Cookie присутствует только при HTTPS |
| Проверить HttpOnly-флаг | Cookie не видна через document.cookie в консоли |
Сценарии для localStorage
| Сценарий | Ожидаемый результат |
|---|---|
| Удалить localStorage | Предпочтения сбрасываются на дефолтные |
| Изменить значение | Интерфейс реагирует на изменение? |
| Открыть в другой вкладке | Данные видны в другой вкладке того же сайта |
| Открыть в incognito | Данные из обычного режима недоступны |
Частые баги, связанные с хранилищем
- Токен в localStorage вместо HttpOnly cookie → уязвимость к XSS-атаке
- Выход из аккаунта не очищает cookie → следующий пользователь этого браузера остаётся авторизованным
- Настройки не сохраняются → данные записываются в sessionStorage вместо localStorage
- Ошибка при полном localStorage → браузер выбросит exception при попытке записи
Частые ошибки понимания
- ❌ "Cookie и localStorage — одно и то же" → cookie отправляются на сервер автоматически, localStorage — нет
- ❌ "Если закрыть браузер, всё удалится" → localStorage и cookie с Expires сохраняются после перезапуска
- ❌ "HttpOnly cookie безопасна полностью" → защищает от XSS, но не от CSRF
Что мы запомним
- Три типа хранилища: cookies (отправляются на сервер), sessionStorage (только вкладка), localStorage (постоянное)
- Cookie-атрибуты HttpOnly, Secure и SameSite критичны для безопасности
- DevTools → Application — главное место для инспекции хранилища
- Тестируй сценарии очистки: разлогин при удалении cookie, сброс настроек при очистке localStorage
- Храни токены авторизации в HttpOnly cookies, а не в localStorage