Storage Access API 处理 PWA 的第三方会话、Cookie 和身份验证

为什么这很重要

PWA 越来越多地嵌入第三方内容——支付小工具、社交小工具、聊天集成、SSO 提供商。跨站点追踪的担忧意味着浏览器现在默认阻止第三方 Cookie 和存储。Storage Access API 提供了一种安全、尊重隐私的请求访问方式，无需用户导航离开。

第三方 Cookie 问题

默认情况下，从不同源嵌入的 IFrame 提供的网站无法访问自己的 Cookie 和存储。Safari 和 Firefox 完全阻止这一点，Chrome 在更多情况下也会阻止。因此，当你的 PWA 嵌入第三方支付表单或 SSO 按钮时，嵌入的内容无法读取自己的身份验证 Cookie。用户在已登录的情况下仍会看到登录提示。

Storage Access API 基础

// 在第三方 IFrame 中请求存储访问
document.hasStorageAccess().then((hasAccess) => {
  if (hasAccess) {
    // 已有访问权限，继续
    return;
  }

  // 请求访问 - 需要用户激活
  return document.requestStorageAccess();
}).then(() => {
  // 现在可以访问 Cookie、localStorage、IndexedDB
  // 尝试身份验证，加载用户会话
  initializeAuth();
}).catch((error) => {
  // 访问被拒绝 - 回退到其他身份验证流程
  showAuthFallback();
});

关键约束：

• 需要用户手势（点击、轻触、键盘输入）
• 浏览器会显示权限提示
• 为每对源存储授予首选项
• 清除 Cookie 时重置

PWA 何时需要此功能

嵌入为 IFrame 的支付处理器： 支付提供商需要读取会话 Cookie 以跳过不必要的登录步骤。

社交分享小工具： 嵌入的 Twitter、Facebook 或 LinkedIn 小工具需要自己的存储才能正常工作。

SSO 和身份验证提供商： 嵌入来自 Auth0、Okta 或类似提供商的登录表单时，它们需要 Cookie 访问。

广告和分析： 第三方追踪像素和信标需要 Cookie 访问权限进行转化追踪和用户归因。

实现检查清单

请求前检测：

// 检查 API 是否受支持
if ('requestStorageAccess' in document) {
  // 功能检测通过
  requestAccess();
} else {
  // 不支持 Storage Access API 的浏览器的回退
  useAlternativeAuth();
}

处理用户权限决策：

document.requestStorageAccess().then(() => {
  // 用户授予访问权限
  trackEvent('storage_access_granted');
  proceedWithThirdPartyContent();
}).catch(() => {
  // 用户拒绝或 API 不支持
  trackEvent('storage_access_denied');
  showInlineLoginAlternative();
});

尊重浏览器放宽模式：

现代浏览器有时会在用户意图明确的情况下自动授予访问权——比如从跨站点链接点击时。监控此行为并调整你的 UX。

回退策略

当存储访问被拒绝时，不要阻止你的 PWA：

• 在你自己的源内提供内联登录表单
• 使用返回到你域名的 OAuth 回调 URL
• 实现基于弹窗的身份验证窗口
• 通过签名令牌提供服务器端会话共享

隐私与信任

Storage Access API 专为隐私而构建：

• 需要明确的用户同意
• 每站点、每对授予（嵌入站点和嵌入站点）
• 可见提示说明正在请求什么
• 用户可以在浏览器设置中撤销访问

要透明地说明你为什么请求访问。你的权限提示文案应该是说"使用现有会话登录到 PaymentProvider"，而不仅仅是"允许 Cookie"。

对开发者的建议

战略性地嵌入第三方服务。每个跨源 IFrame 都是一个你要求用户跨越的信任边界。在添加嵌入内容之前，问自己：

• 你的 PWA 是否真的需要此功能？
• 你能否在自己的源中构建等效功能？
• 第三方源是否值得信任？

Storage Access API 不能修复糟糕的隐私卫生——它提供了一种隐私友好的方式，在真正需要跨源身份验证时进行跨源身份验证。

下一步

1. 审计你的 PWA 中嵌入的第三方内容
2. 测试跨 Safari、Firefox 和 Chrome 的存储访问行为
3. 为被拒绝的权限设计优雅的回退方案
4. 添加存储访问授予和拒绝的追踪，以了解用户偏好
5. 在架构文档中记录哪些嵌入服务需要存储访问

跨源 PWA 需要仔细处理身份和存储。Storage Access API 为你提供了这种控制。