Safari中同站点子域名与主域名LocalStorage互通失效问题求助

核心思路：利用同站点Cookie共享特性 #

由于所有站点都属于site.com这个同站点（eTLD+1一致），Safari ITP不会拦截同站点内的Cookie共享，只要配置正确，就能直接实现登录态跨子域名和主域名同步。

1. 正确配置跨子域名Cookie（推荐方案） #

这是最可靠的解决方式，后端在处理登录请求时，返回的Cookie需要设置以下关键属性：

• Domain=.site.com：指定Cookie的作用域为所有site.com的子域名（包括主域名site.com），注意前缀的点不能省略。
• SameSite=Lax：适配现代浏览器的安全策略，同站点请求会自动携带Cookie；如果需要跨域请求（这里不需要）可设为None，但必须配合Secure。
• Secure=true：仅在HTTPS环境下生效，Safari等现代浏览器要求跨子域名Cookie必须使用HTTPS。
• HttpOnly=true（可选但推荐）：防止XSS攻击窃取Cookie。

示例后端Cookie设置（以Node.js为例）：

res.cookie('auth_token', userAuthToken, {
  domain: '.site.com',
  sameSite: 'Lax',
  secure: process.env.NODE_ENV === 'production', // 生产环境启用HTTPS
  httpOnly: true,
  maxAge: 7 * 24 * 60 * 60 * 1000 // 7天有效期
});

配置后，用户在任意子域名登录后，site.com会自动读取到这个Cookie，无需额外的iframe同步逻辑。

2. 临时凭证重定向方案（Cookie配置受限场景） #

如果无法修改后端Cookie配置，可以通过临时凭证重定向实现同步：

• 子域名登录成功后，后端生成一次性有效的临时验证token，将用户重定向到site.com/sync-auth?token=xxx。
• 主域名的/sync-auth接口验证token的有效性，验证通过后设置主域名的登录Cookie（同时配置Domain=.site.com），然后重定向回用户原本访问的子域名或主域名首页。
• 注意临时token必须设置较短的有效期（比如5分钟），并限制使用次数，避免安全风险。

3. 现代浏览器Shared Storage API（备选方案） #

Safari 15.4+、Chrome等现代浏览器支持Shared Storage API，可实现同站点跨子域名的存储共享：

• 子域名登录后，将用户登录信息存入Shared Storage：

// es.site.com 登录成功后执行
window.sharedStorage.set('user_auth', JSON.stringify({ token: 'xxx', userId: 123 }), {
  ignore: 'not-origin', // 允许同站点其他域名读取
  expires: Date.now() + 7 * 24 * 60 * 60 * 1000
});

• 主域名site.com读取并同步登录态：

// site.com 页面加载时执行
window.sharedStorage.get('user_auth').then(storedData => {
  if (storedData) {
    const authData = JSON.parse(storedData);
    // 这里可以设置主域名的Cookie或本地存储，完成登录态同步
    document.cookie = `auth_token=${authData.token}; domain=.site.com; sameSite=Lax; secure; maxAge=${7*24*60*60*1000}`;
  }
});

关键注意事项 #

• 必须使用HTTPS：Safari在HTTP环境下对跨子域名Cookie的限制极为严格，Secure属性也强制要求HTTPS。
• 放弃localStorage/sessionStorage：这类存储是域隔离的，同站点子域名无法直接访问，且ITP会对第三方iframe的存储分区，导致原有方案失效。
• 验证同站点标识：确保所有站点的注册域名一致（即eTLD+1为site.com），否则无法享受同站点的Cookie共享特权。

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