Chrome/Edge v133导致Angular应用Azure AD SSO登录后空白页

问题背景 #

Angular应用在Azure AD SSO流程中出现异常：后端返回授权URL后，通过window.location.href = azureAdRedirectUrl;跳转至Azure AD认证；认证成功后Azure AD以302重定向回应用，URL携带code查询参数，但应用显示空白页，无法完成登录流程。地址栏URL正确，且近期无前端代码变更。

关键现象：

• 关闭DevTools刷新页面，空白页问题持续
• 打开DevTools刷新页面，应用可正常处理查询参数完成登录
• 问题间歇性出现，且不仅限于SSO场景，普通页面刷新也可能触发
• 仅在Chromium v133（Chrome/Edge v133）中出现，Chrome v132及Firefox功能正常

根因分析 #

该问题由Chromium v133的版本更新导致，核心是新版本对页面加载时序、资源调度的优化与Angular应用的初始化逻辑产生冲突：

• Chromium v133调整了初始页面加载时的脚本执行优先级，Angular的路由初始化、查询参数订阅逻辑可能在参数解析完成前执行，导致无法捕获code参数
• 关闭DevTools时，浏览器启用了额外的性能优化（如脚本延迟加载、微任务调度调整），进一步放大了时序问题；而打开DevTools时，这些优化会被禁用，恢复旧的执行逻辑，因此问题消失

解决方案 #

1. 调整Angular初始化时序 #

在main.ts中等待DOM完全加载后再启动Angular，确保路由初始化时页面资源已就绪：

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

临时应急修复：添加微小延迟触发初始化：

setTimeout(() => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}, 100);

2. 强制捕获查询参数 #

在登录组件或路由守卫中，显式获取并处理查询参数，避免依赖路由订阅的自动触发：

// 登录组件 ngOnInit
ngOnInit(): void {
  // 直接从路由快照获取参数
  const authCode = this.route.snapshot.queryParams['code'];
  if (authCode) {
    this.processLogin(authCode);
  }
  // 同时订阅参数变化，覆盖后续路由更新场景
  this.route.queryParams.subscribe(params => {
    if (params['code']) {
      this.processLogin(params['code']);
    }
  });
}

3. 路由守卫中添加时序兼容处理 #

如果使用路由守卫处理认证逻辑，通过delay(0)触发微任务队列，确保参数已解析完成：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
  return of(route.queryParams['code']).pipe(
    delay(0),
    map(code => {
      if (code) {
        this.authService.handleAuthCode(code);
        return true;
      }
      // 未携带code时的跳转逻辑
      this.router.navigate(['/login']);
      return false;
    })
  );
}

4. 临时禁用Chromium性能优化（仅测试用） #

启动Chrome/Edge时添加以下参数，关闭可能冲突的优化项：

--disable-features=PerformanceMemorySampling,OptimizationHints

注意：此方法仅用于排查验证，不建议生产环境使用。

Chromium v133相关变更参考 #

• 页面启动性能优化：优化了初始加载时的脚本执行优先级，减少非关键脚本阻塞，但影响了依赖同步执行的框架初始化逻辑
• DevTools行为调整：关闭DevTools时默认启用更多后台性能优化，这些优化在v132及之前版本未全面启用
• URL解析时机调整：修改了查询参数的解析时序，导致Angular路由无法及时捕获参数变化

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