跨不同子域共享LocalStorage/Cookies问题求助

一、Cookie跨子域共享（最简单直接的方式） #

Cookie本身支持通过配置domain属性实现跨子域共享，不需要依赖postMessage：

• 设置Cookie时，将domain指定为父域.example.com，这样所有子域（ab.example.com、xyz.example.com等）都能读取和修改这个Cookie
• 示例代码（在任意子域页面执行）：

  document.cookie = "user_id=12345; domain=.example.com; path=/; secure; SameSite=Lax";
  

• 关键注意点：
  • domain必须以.开头（比如.example.com），兼容所有浏览器；如果直接写example.com，部分浏览器可能不识别为父域
  • path=/确保Cookie在整个站点的所有路径下都能访问
  • secure可选，开启后仅在HTTPS环境下传输Cookie，提升安全性
  • SameSite属性根据业务需求设置（Lax/Strict/None），避免CSRF风险

二、LocalStorage跨子域共享（基于postMessage的正确实现） #

LocalStorage受同源策略限制，子域之间无法直接访问彼此的存储，需要通过postMessage建立通信通道。如果之前用postMessage失败，大概率是监听逻辑或域名验证环节出了问题，以下是可运行的实现步骤：

步骤1：在目标子域（比如xyz.example.com）添加消息监听 #

在xyz.example.com的任意页面（可以专门做一个无UI的桥页，比如bridge.html）中添加监听代码，负责接收请求并返回LocalStorage数据：

window.addEventListener('message', (event) => {
  // 严格验证发送方域名，防止恶意请求
  if (event.origin !== 'https://ab.example.com') return;

  // 根据请求类型处理逻辑
  if (event.data.type === 'get_storage') {
    const storageValue = localStorage.getItem(event.data.key);
    // 回传数据给发送方
    event.source.postMessage({
      type: 'storage_response',
      key: event.data.key,
      value: storageValue
    }, event.origin);
  } else if (event.data.type === 'set_storage') {
    // 支持写入数据到xyz的LocalStorage
    localStorage.setItem(event.data.key, event.data.value);
    event.source.postMessage({
      type: 'storage_set_success',
      key: event.data.key
    }, event.origin);
  }
});

步骤2：在发起请求的子域（ab.example.com）发送请求并接收数据 #

在ab.example.com的页面中，通过嵌入隐藏iframe建立和xyz.example.com的通信：

// 创建隐藏iframe，加载xyz的桥页
const bridgeIframe = document.createElement('iframe');
bridgeIframe.src = 'https://xyz.example.com/bridge.html';
bridgeIframe.style.display = 'none';
document.body.appendChild(bridgeIframe);

// 等待iframe加载完成后发送请求
bridgeIframe.addEventListener('load', () => {
  // 示例：请求获取xyz的LocalStorage中user_info的值
  bridgeIframe.contentWindow.postMessage({
    type: 'get_storage',
    key: 'user_info'
  }, 'https://xyz.example.com');

  // 也可以写入数据到xyz的LocalStorage
  // bridgeIframe.contentWindow.postMessage({
  //   type: 'set_storage',
  //   key: 'user_info',
  //   value: JSON.stringify({name: 'test', id: 678})
  // }, 'https://xyz.example.com');
});

// 监听xyz返回的消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://xyz.example.com') return;

  if (event.data.type === 'storage_response') {
    console.log(`从xyz获取到${event.data.key}的值：`, event.data.value);
    // 将获取到的值存入当前域的LocalStorage
    localStorage.setItem(event.data.key, event.data.value);
  } else if (event.data.type === 'storage_set_success') {
    console.log(`成功写入${event.data.key}到xyz的LocalStorage`);
  }
});

关键注意事项 #

• 必须始终验证event.origin，只处理信任域名的消息，避免XSS攻击
• 桥页必须和目标子域同域（xyz.example.com），否则无法访问其LocalStorage
• 如果需要双向共享，在两个子域都添加对应的监听和发送逻辑即可

内容的提问来源于stack exchange，提问作者Aarif Ahmad