Chrome基础HTTP认证弹窗时地址栏如何正常显示锁图标

行为本质 #

该现象是Chrome 88版本内置的连接状态判定规则导致的，并非站点HTTPS配置存在问题：

• 当站点返回401状态码触发浏览器原生HTTP基础认证弹窗时，由于页面尚未完成身份校验、未加载实际受保护内容，浏览器会临时将连接状态标记为“待交互确认”，将常规HTTPS场景下的锁形图标替换为提示类ⓘ图标
• 弹窗弹出期间可直接查看地址栏确认：站点协议始终为https://，TLS证书校验、加密传输链路均处于正常状态，不存在连接降级或证书安全问题
• 用户完成登录提交、或是主动取消认证弹窗后，浏览器会在当前会话周期内缓存该域名的认证状态；同标签页内后续重载页面时，不会重新触发原生认证挑战流程，因此会正常显示锁形图标；但当在新标签页打开、会话缓存失效后重新触发认证挑战时，临时显示ⓘ图标的状态会再次出现

可落地的调整方案 #

• 替换原生基础认证交互：弃用401状态码触发的浏览器原生Basic Auth流程，改用前端自定义的登录交互组件实现鉴权逻辑。这种场景下浏览器全程不会触发原生认证挑战的状态判定，地址栏会始终按照真实HTTPS连接状态显示锁形图标
• 内网/测试场景可通过启动参数跳过首次弹窗环节：为Chrome添加启动参数--auth-server-whitelist="受保护站点的域名匹配规则"，配合浏览器内置的凭据自动填充逻辑，跳过首次触发弹窗的状态切换过程，从根源上避免图标临时异常的问题

调试辅助技巧：如果需要重置当前会话的认证凭据、无需重启Chrome即可重新触发认证弹窗，可打开浏览器控制台（快捷键Ctrl+Shift+J）运行如下代码：

var req = new XMLHttpRequest();
req.onreadystatechange = ()=>{
    if (req.readyState == 4) location.reload();     
};
req.open('GET', location.href.replace('://', '://👋@'), true);
req.send();

内容的提问来源于stack exchange，提问作者Tamás Bolvári