Работает ли localStorage на нескольких доменах

Механизм изоляции localStorage

Нет, localStorage не работает и не может напрямую обмениваться данными между разными доменами (протокол+домен+порт). Это фундаментальное ограничение, встроенное в политику безопасности браузера Same-Origin Policy (SOP). Каждое сочетание протокола, доменного имени и порта считается уникальным источником (origin), и localStorage строго изолирован в его пределах.

Почему так устроено?

Это ключевая мера безопасности, которая предотвращает:

• Кражу данных: Злонамеренный сайт не может прочитать данные, сохраненные другим сайтом (например, ваши токены авторизации с bank.com).
• Межсайтовые атаки (XSS): Даже если на одном сайте есть уязвимость, она не позволит напрямую получить доступ к данным другого сайта через localStorage.
• Нарушение конфиденциальности: Сайты не могут отслеживать вашу активность на других ресурсах через общее хранилище.

Практический пример изоляции

// На странице https://example.com
localStorage.setItem('secret', 'данные с Example');

// На странице https://anotherexample.com
const data = localStorage.getItem('secret'); // Вернет `null`
console.log(data); // null - доступ к данным другого домена невозможен

Обходные пути и решения для обмена данными

Если вам необходимо разделять состояние или данные между поддоменами или разными доменами, существуют специальные техники:

1. Для поддоменов (например, app.site.com и blog.site.com)

Можно явно указать общий домен (domain) для документа, после чего localStorage станет доступен для всех поддоменов. Это делается через установку document.domain. Однако этот метод считается устаревшим (deprecated) и его использование не рекомендуется.

// На страницах app.site.com и blog.site.com
document.domain = 'site.com'; // Устанавливаем общий домен
// Теперь localStorage будет общим для всех поддоменов *.site.com

2. Для полностью разных доменов

Требуется более сложная настройка с использованием механизмов межсайтового взаимодействия.

• Окна и сообщения (Window.postMessage API): Один домен может открыть окно или iframe с другим доменом и отправить ему данные через защищенное сообщение.

  // На сайте A (https://site-a.com)
  const popup = window.open('https://site-b.com');
  // После загрузки popup отправляем сообщение
  popup.postMessage({ type: 'SET_DATA', key: 'token', value: 'abc123' }, 'https://site-b.com');
  
  // На сайте B (https://site-b.com)
  window.addEventListener('message', (event) => {
      // ВАЖНО: Всегда проверяем origin отправителя!
      if (event.origin === 'https://site-a.com') {
          if (event.data.type === 'SET_DATA') {
              localStorage.setItem(event.data.key, event.data.value);
          }
      }
  });
  

• Серверное посредничество: Самый надежный способ. Данные с домена А отправляются на его сервер, который через CORS (Cross-Origin Resource Sharing) или специальный прокси-эндпоинт передает их серверу домена Б. Тот, в свою очередь, может отдать эти данные клиенту на домене Б.

• Специализированные решения:

    *   **OAuth 2.0 / OpenID Connect**: Стандарт для безопасного делегирования авторизации и обмена минимальными данными (например, email) между доменами.
    *   **Single Sign-On (SSO)**: Архитектура, при которой центральный сервер аутентификации выдает токены, валидные для нескольких связанных доменов.
    *   **Кросс-доменные куки (Cross-Domain Cookies)**: Могут быть настроены на уровне сервера для общих данных, но они имеют свои ограничения (размер, безопасность) и автоматически отправляются с каждым HTTP-запросом.

Ключевые выводы

• localStorage изолирован по origin. Разные домены = разные, не связанные между собой хранилища.
• Это ограничение — функция безопасности, а не баг.
• Для поддоменов можно использовать устаревший document.domain, но лучше проектировать приложение с учетом изоляции или использовать централизованный сервис (например, Backend-for-Frontend).
• Для разных доменов необходим явный и безопасный канал связи: postMessage для простых клиентских сценариев или, что предпочтительнее, серверное посредничество с проверкой origin и CORS.

Понимание этой изоляции критически важно для проектирования безопасных и корректно работающих веб-приложений, особенно в микросервисных архитектурах или экосистемах связанных сервисов.