Angular10项目如何隐藏登录请求payload中的用户名密码

是否属于安全问题 #

需分场景判断：

• 若站点使用HTTP协议：属于严重安全问题。HTTP为明文传输，网络链路中的所有中间节点（公共WiFi运营商、网络服务提供商、恶意中间人等）都可以直接截获请求中的账号密码，存在100%的泄露风险。
• 若站点使用HTTPS协议：不属于安全问题。HTTPS的传输层为全链路加密，中间节点无法获取到传输的明文内容，浏览器网络标签中展示的明文是浏览器在加密前/解密后的本地数据，只有当前设备的操作用户自己可以看到，不会泄露给第三方。

风险规避方案 #

• 强制全站升级HTTPS：这是保障传输安全的最基础核心措施，目前主流云服务商、CDN服务商都提供免费的SSL证书，部署成本极低，所有涉及用户隐私的系统必须启用HTTPS。
• 清理敏感信息日志：当前代码的login方法中存在console.log(credential)的逻辑，会直接将账号密码输出到控制台，正式环境需要删除该日志，或通过环境变量控制仅在开发环境输出。
• 前端密码非对称加密（可选，适用于高安全要求场景）：前端使用服务端公开的RSA公钥对用户输入的密码加密后再发起请求，后端收到后使用私钥解密校验，即使出现极端的HTTPS被破解的情况，攻击者拿到的也是加密后的密文，无法直接获取原始密码。加密逻辑直接使用成熟的开源库即可，不要自行实现加密算法。
• 补充服务端安全防护：在服务端添加登录请求频率限制、异常登录校验、验证码等机制，降低账号被暴力破解的风险。

代码优化示例 #

login(credential: AuthLoginInfo): Observable<boolean> {
  // 仅开发环境输出调试日志，正式环境不打印敏感信息
  if (!environment.production) {
    console.log(credential);
  }
  return this.apiService.post('/authenticate', false, credential)
    .pipe(
      tap(token => this.doLoginUser(credential.username, token.jwt)),
      mapTo(true),
      catchError(error => of(false))
    );
}

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