如何在JavaScript中获取Basic Auth登录的用户名和密码

首先直接回答核心疑问：

正常情况下，前端JavaScript 无法直接读取到浏览器存储的本次Basic Auth登录的明文用户名和密码。这是浏览器的原生安全设计：Basic Auth的凭证会被保存在浏览器内部的会话缓存/密码管理模块中，不会暴露给页面的JS上下文，避免XSS漏洞直接盗取用户登录凭证。

复用登录凭证验证WebSocket身份的可行方案 #

你不需要主动获取明文凭证即可实现需求，有以下几种成熟的实现方式：

• 同域WebSocket连接默认自动携带凭证：如果你的WebSocket服务和当前页面属于同域（ws对应http、wss对应https，域名、端口完全一致），现代浏览器发起WebSocket请求时，会自动将当前会话已生效的Basic Auth凭证附加在请求的Authorization头中，和普通HTTP请求的Basic Auth校验逻辑完全一致，服务端直接正常校验该请求头即可确认用户身份，前端无需任何额外处理。
• 跨域WebSocket场景的适配：如果是跨域WebSocket连接，只要服务端配置允许跨域携带凭证，浏览器依旧会自动附带Basic Auth凭证，无需前端手动传递。
• 可选的更安全替代方案：如果自动带凭证的方式不满足你的业务场景，你可以在用户完成Basic Auth登录后，由后端生成一个加密的短期有效会话Token返回给前端，存储在sessionStorage中，发起WebSocket连接时将Token放在请求的query参数中，或在连接建立后第一条消息传递Token做身份校验，该方案无需接触原始的Basic Auth凭证，安全性更高。

注意事项 #

• 不要自行实现前端收集用户名密码并本地存储的逻辑，该做法会大幅提升凭证被XSS漏洞盗取的风险，安全性远低于浏览器原生的凭证缓存机制。
• 生产环境必须使用wss（WebSocket over TLS）协议发起连接，避免凭证或Token在传输过程中被窃听。

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