Cookie vs sessionStorage в React — управление сессиями

Используйте cookie и sessionStorage, чтобы сохранять данные аутентификации и другие пользовательские настройки в браузере. Cookie подходят для сохранения данных между сессиями и на уровне домена, sessionStorage ограничен вкладкой и удобен для временных данных. В статье приведены рабочие примеры на React, рекомендации по безопасности, чеклисты и альтернативы для разных сценариев.

Почему важно правильно хранить сессии

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

Кратко о терминах

Cookie — маленькие текстовые файлы, которые браузер сохраняет на устройстве пользователя. Часто используются для токенов аутентификации и идентификаторов сессии.
sessionStorage — клиентское хранилище, доступное только в рамках одной вкладки браузера. Данные удаляются при закрытии вкладки.

Экран ПК с логотипом React и кодом

Когда использовать cookie, а когда sessionStorage

Cookie — если необходимо сохранять данные между открытыми сессиями или сделать аутентификацию доступной для нескольких вкладок. Они автоматически отправляются с HTTP-запросами к домену, что облегчает авторизацию на сервере.
sessionStorage — если нужно изолировать данные в одной вкладке, например для одновременной работы нескольких аккаунтов в разных вкладках. sessionStorage проще и безопаснее в плане области видимости, но данные не переживают закрытие вкладки.

Важно: cookie и sessionStorage можно комбинировать — например, хранить короткоживущий access-токен в памяти или sessionStorage и refresh-токен в безопасной cookie с флагом httpOnly на сервере.

Что обычно хранится в сессии

Информация, связанная с аутентификацией: токены, идентификаторы сессии
Пользовательские предпочтения: язык, тема, способ отображения данных
Временные состояния: состояние корзины, шаги формы

Ноутбук с кодом на столе в кофейне

Установка проекта React с Vite

Удобный способ начать — собрать проект на Vite и установить вспомогательные пакеты

npm install js-cookie react-router-dom

Далее мы покажем пример рабочего приложения, где после успешной авторизации клиент сохраняет данные в cookie или в sessionStorage, чтобы не запрашивать повторно логин при навигации.

Пример: хранение аутентификации в cookie

Создайте файл components/Login.jsx в папке src и добавьте форму логина. Ниже показан минимальный рабочий пример компонента с тестовой аутентификацией и сохранением данных в cookie.

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Cookies from 'js-cookie'

const Login = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const navigate = useNavigate()

  const testAuthData = {
    username: 'test',
    password: 'test'
  }

  const authenticateUser = (username, password) => {
    if (username === testAuthData.username && password === testAuthData.password) {
      const userData = {
        username,
        password
      }
      const expirationTime = new Date(new Date().getTime() + 60000)
      Cookies.set('auth', JSON.stringify(userData), { expires: expirationTime })
      return true
    }
    return false
  }

  const handleLogin = (e) => {
    e.preventDefault()
    const isAuthenticated = authenticateUser(username, password)
    if (isAuthenticated) {
      navigate('/protected')
    } else {
      // показать сообщение об ошибке
      alert('Неверное имя пользователя или пароль')
    }
  }

  return (
    
       setUsername(e.target.value)}
      />
       setPassword(e.target.value)}
      />
      
    
  )
}

export default Login

Пояснения к коду

Мы используем тестовые учётные данные, так как бэкенд здесь отсутствует.
При совпадении логина и пароля формируется объект userData, сериализуется и сохраняется в cookie ‘auth’.
Cookie создаётся с временем жизни expirationTime, после которого браузер автоматически удалит её.

Маршрутизация и проверка сессии

Обновите App.jsx, чтобы перенаправлять неавторизованных пользователей на страницу /login и показывать страницу для авторизованных.

import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom'
import Cookies from 'js-cookie'
import Login from './components/Login'

const ProtectedPage = ({ ...rest }) => {
  const isAuthenticated = !!Cookies.get('auth')
  const navigate = useNavigate()

  const handleLogout = () => {
    Cookies.remove('auth')
    navigate('/login')
  }

  if (!isAuthenticated) {
    navigate('/login')
    return null
  }

  return (
    
      Hello, World!
      
    
  )
}

const App = () => {
  return (
    
      
        } />
        } />
      
    
  )
}

export default App

Запустите

npm run dev

И откройте браузер по адресу http://127.0.0.1:5173/login

После успешного входа cookie ‘auth’ будет создана, и вы попадёте на защищённую страницу. При выходе cookie удаляется и сессия окончательно завершается.

Отображение cookie в инструментах разработчика браузера

Использование sessionStorage для хранения аутентификации

Если вы хотите хранить данные только в рамках одной вкладки, замените установку cookie на запись в sessionStorage. Пример добавления в функцию authenticateUser:

sessionStorage.setItem('auth', JSON.stringify(userData))

Данные в sessionStorage доступны только в той вкладке, где они были записаны, и будут удалены после закрытия вкладки.

Когда такой подход не подойдёт

Если приложение требует строгого контроля сессий на сервере и возможность отзыва сессионных токенов, лучше использовать серверные сессии.
Для высокой безопасности никогда не храните секретные ключи или несинхронизированные refresh-токены в обычных cookie без флага httpOnly.
Если нужно одновременно работать в нескольких вкладках под разными аккаунтами, cookie может мешать — используйте sessionStorage в отдельных вкладках.

Альтернативные подходы

Серверные сессии: сервер хранит состояние сессии, в браузере — только идентификатор сессии в защищённой cookie. Это упрощает отзыв сессий.
JWT в localStorage или в httpOnly cookie: JWT удобны для масштабирования, но localStorage уязвим для XSS. Лучше хранить JWT в httpOnly secure cookie, подписанных и проверяемых на сервере.
Смешанные схемы: короткоживущий access-токен в памяти или sessionStorage, refresh-токен в httpOnly cookie и обновление токенов через безопасный endpoint.

Модель принятия решения по хранению

Нужна ли долговременная сессия между закрытиями браузера? Если да — cookie.
Нужна ли изоляция между вкладками? Если да — sessionStorage.
Требуется ли возможность серверного аннулирования сессии? Если да — серверные сессии или httpOnly cookie.

flowchart TD
  A[Начало] --> B{Требуется ли сохранять сессию между закрытиями браузера}
  B -->|Да| C[Использовать cookie или httpOnly cookie]
  B -->|Нет| D[Использовать sessionStorage]
  C --> E{Нужна ли возможность аннулирования сессии на сервере}
  E -->|Да| F[Серверные сессии + идентификатор в cookie]
  E -->|Нет| G[JWT в httpOnly cookie]
  D --> H{Нужна ли поддержка нескольких вкладок с разными аккаунтами}
  H -->|Да| I[Оставить sessionStorage]
  H -->|Нет| J[Можно использовать sessionStorage или cookie]

Безопасность и харднинг

Не храните чувствительные данные в доступных из JavaScript cookie и в localStorage при угрозе XSS.
Используйте флаги cookie: Secure, SameSite и httpOnly. httpOnly делает cookie недоступной для JS, что снижает риск кражи через XSS.
Ограничьте область действия cookie по домену и пути, когда это возможно.
На сервере проверяйте срок жизни и подпись токенов, применяйте rotation и механизм отзыва refresh-токенов.

Приватность и соответствие законодательству

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

Чеклист разработчика перед релизом

Для инженера

Обработаны случаи отсутствия cookie или sessionStorage
Реализована безопасная установка и удаление cookie
Тесты на XSS и CSRF пройдены
Политика хранения данных и согласия пользователей документирована

Для дизайнера/продукта

Понятные сообщения об ошибках для состояния сессии
UX для истечения сессии и повторного входа

Для инженера по безопасности

cookie с флагами Secure, SameSite и httpOnly, где возможно
Логика ротации токенов и отзывов реализована

Факто-бокс: полезные технические заметки

Размер одной cookie обычно ограничивается примерно 4096 байтами; это следует учитывать при хранении payload в cookie.
sessionStorage и localStorage обычно предоставляют по несколько мегабайт на origin, точное значение зависит от браузера.
Cookie автоматически отправляются с запросами к домену, sessionStorage — нет.

Критерии приёмки

Пользователь, указав правильные тестовые учётные данные, успешно попадает на защищённую страницу
Cookie ‘auth’ создаётся и удаляется при выходе
При отсутствии cookie приложение перенаправляет пользователя на страницу логина
Реализованы базовые механизмы защиты от XSS и CSRF и документировано поведение времени жизни сессии

Тестовые сценарии

Ввод корректных учётных данных приводит к перенаправлению на /protected
Неверные учётные данные показывают сообщение об ошибке
Удаление cookie вручную заставляет приложение перенаправить на /login
Закрытие вкладки с sessionStorage очищает данные при повторном открытии

Заключение

Cookie и sessionStorage — удобные инструменты для хранения сессионных данных в приложениях React. Выбор между ними зависит от требований к долговечности сессии, области видимости и безопасности. Для критичных данных всегда отдавайте предпочтение схемам с httpOnly cookie или серверными сессиями, а также комбинируйте подходы для баланса UX и безопасности.

Важное

Никогда не храните секреты и ключи в client-side хранилищах, доступных из JavaScript
Документируйте политику хранения сессий и обеспечьте соответствие требованиям приватности

Краткое резюме