重定向至第三方域名后，如何有效操作含token的localStorage？

核心限制说明 #

浏览器的同源策略会限制不同域名（包括子域名）的localStorage无法互相访问，所以直接在原域名写入的token，第三方域名完全拿不到。要实现跨域写入，得通过以下几种合法且可落地的方式：

1. 第三方域名配合，通过URL参数传递token #

重定向时把token作为URL参数传给第三方页面，第三方页面加载后读取参数，再写入自己域名的localStorage。
示例代码：

// 原域名页面：构造带token的重定向链接
const token = 'your-pre-obtained-token';
window.location.href = `https://third-party-domain.com?token=${encodeURIComponent(token)}`;

// 第三方域名页面：读取参数并写入localStorage
window.addEventListener('load', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const token = urlParams.get('token');
  if (token) {
    localStorage.setItem('authToken', token);
    // 可选：清除URL中的token参数，避免地址栏泄露
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

注意：URL传token有泄露风险，建议用一次性临时token，或者先对token加密再传递。

2. 用postMessage跨域通信传递 #

如果原页面和第三方页面能配合开发，可通过弹窗或iframe加载第三方页面，再用postMessage传token：

• 原页面代码：

const token = 'your-pre-obtained-token';
// 打开第三方弹窗
const thirdPartyWindow = window.open('https://third-party-domain.com/receive-token');
// 等弹窗加载完成后发送token
setTimeout(() => {
  thirdPartyWindow.postMessage({ type: 'SET_TOKEN', token: token }, 'https://third-party-domain.com');
}, 1000);

• 第三方页面代码：

window.addEventListener('message', (event) => {
  // 验证消息来源，防止恶意请求
  if (event.origin !== 'https://your-original-domain.com') return;
  if (event.data.type === 'SET_TOKEN') {
    localStorage.setItem('authToken', event.data.token);
    // 可选：通知原页面完成操作，关闭弹窗
    event.source.postMessage({ type: 'TOKEN_SET_SUCCESS' }, event.origin);
    window.close();
  }
});

3. 借助后端中间层中转（第三方无法配合前端修改时用） #

如果第三方域名不能改前端代码，可通过自己的后端做中转：

1. 原页面把token发送给自己的后端接口
2. 后端重定向到第三方域名时，通过**Cookie（仅限第三方和后端是同主域名的子域名场景）**生成临时凭证，第三方域名再请求你的后端获取token，最后写入自己的localStorage。

关键安全提醒 #

• 所有跨域传token的方式必须用HTTPS加密传输，避免明文泄露
• 必须验证消息/请求的来源，防止CSRF攻击
• 优先使用短期有效、权限受限的token，降低泄露风险

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