多域名应用中，如何用JS将登录token存入其他域名的localStorage？

由于浏览器同源策略限制，主域名的localStorage无法直接操作其他域名的存储，以下是几种实用的解决思路：

1. URL参数临时传递（简易但需注意安全） #

登录成功后重定向到目标域名时，把token作为URL参数附带：

https://target-domain.com?token=your-auth-token

目标域名页面加载时，读取URL中的token参数，存入自身的localStorage，立即通过替换URL的方式移除参数（避免token暴露在地址栏、历史记录中）。

注意：此方法仅适合非敏感场景，必须配合HTTPS使用，且建议使用短时效的token降低泄露风险。

2. postMessage跨域通信 #

通过iframe+postMessage实现安全的跨域数据传递：

• 主域名登录完成后，创建一个隐藏的目标域名iframe，加载目标域名的接收页面（或主页面）
• 主域名向iframe发送token：

  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = 'https://target-domain.com/receive-token';
  document.body.appendChild(iframe);
  iframe.onload = () => {
    // 严格指定目标域名，防止消息泄露
    iframe.contentWindow.postMessage('your-auth-token', 'https://target-domain.com');
  };
  // 等待token存储完成后再重定向
  window.addEventListener('message', (event) => {
    if (event.origin === 'https://target-domain.com' && event.data === 'token-saved') {
      window.location.href = 'https://target-domain.com';
    }
  });
  

• 目标域名页面监听message事件，验证来源后存储token：

  window.addEventListener('message', (event) => {
    // 仅处理主域名发来的消息
    if (event.origin !== 'https://main-domain.com') return;
    const token = event.data;
    if (typeof token === 'string' && token) {
      localStorage.setItem('auth-token', token);
      // 通知主域名已完成存储
      event.source.postMessage('token-saved', event.origin);
    }
  });
  

3. 共享Cookie（同根域名场景首选） #

如果三个域名属于同根域名（如a.example.com、b.example.com），可以通过设置Cookie的domain属性实现跨子域名共享：

• 登录时后端将token写入Cookie，配置：

  Set-Cookie: auth-token=xxx; Domain=.example.com; Path=/; Secure; HttpOnly; SameSite=Strict
  

  （若需要前端读取token存入localStorage，可移除HttpOnly属性）
• 目标域名加载时，直接从Cookie中读取token，存入自身的localStorage即可。

4. 后端中转验证（高安全场景） #

通过后端交互避免token在前端暴露：

1. 主域名登录成功后，后端生成一个一次性临时凭证（ticket），并重定向到目标域名，附带该ticket：https://target-domain.com?ticket=xxx
2. 目标域名后端携带ticket请求主域名后端的验证接口
3. 主域名后端验证ticket有效后，返回真实的token给目标域名后端
4. 目标域名后端将token返回给前端，前端存入localStorage

这种方式全程token仅在后端流转，安全性最高，适合对敏感数据要求高的场景。

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