MSAL.js在iOS端Chrome、Safari浏览器无法登录问题如何解决

问题根因 #

该异常由苹果智能跟踪预防（ITP）机制导致：iOS端Safari、Chrome内核均默认启用「阻止跨站跟踪」功能，会拦截第三方跨域存储访问。msal.js 2.14.2版本未内置ITP适配逻辑，授权流程依赖的跨域状态存储被拦截，导致登录流程无法闭环，仅在关闭跨站跟踪限制后可正常运行。 #

可行解决方案 #

• 优先升级msal.js到v2.32.0及以上稳定版本，该版本后官方默认内置ITP兼容逻辑，无需修改核心业务代码即可适配iOS跨站跟踪限制，是投入成本最低的解决方案。
• 若因业务依赖无法升级版本，将登录交互方式从loginPopup弹框模式切换为loginRedirect重定向模式：重定向模式无需依赖跨域第三方存储传递状态，可直接绕过ITP跨站存储限制，注意需要在页面初始化阶段调用handleRedirectPromise处理登录回调结果，同时确保配置的重定向URI和当前站点同根域。
• 调整msal初始化缓存配置，开启第一方Cookie存储兼容：修改msal配置中的cache字段为以下内容，开启后msal会在ITP受限环境下自动使用第一方Cookie存储必要的授权状态，不会被跨站跟踪规则拦截：

const msalConfig = {
  // 其他原有配置保持不变
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
}

• 优化acquireTokenSilent调用逻辑：静默请求抛出interaction_required、login_required类错误时，直接触发交互登录流程，不要多次重试静默请求，避免被浏览器判定为异常请求触发更严格的存储限制。

注意事项 #

• 不要在iframe内嵌套执行msal登录流程，iOS端iframe的存储权限会被ITP额外限制，完全无法写入跨域数据
• 所有配置的重定向URI、权限请求地址必须和应用站点同根域，避免被判定为跨站资源触发拦截
• 不要自定义修改msal内部的状态存储逻辑，避免引入额外的兼容问题

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