如何在浏览器中隐藏request payload值？MERN项目登录凭证明文展示如何处理

首先明确：浏览器开发者工具中展示的Request Payload明文属于本地提交数据的正常展示，不代表传输过程中数据是明文，核心需要做传输、存储两层的安全加固，具体操作如下：

1. 传输层强制配置（优先级最高） #

• 生产环境必须全站部署HTTPS证书，HTTPS协议会在传输层对整个请求内容做加密，中间节点抓包只能获取到密文，从根源避免传输过程泄露登录凭证
• 禁止在生产环境使用HTTP协议暴露登录接口

2. 前端可选额外加密（极端场景防护） #

如果需要做更高等级的安全防护，可以在前端提交前用非对称加密处理密码，后端再用私钥解密，示例方案如下：

• 前端安装jsencrypt依赖：

  npm install jsencrypt
  

• 前端加密代码：

  import JSEncrypt from 'jsencrypt'
  const encryptor = new JSEncrypt()
  // 提前配置后端生成的RSA公钥到前端
  encryptor.setPublicKey('后端生成的RSA公钥字符串')
  // 加密后再提交密码
  const encryptedPassword = encryptor.encrypt(用户输入的原始密码)
  

• 后端拿到加密后的密码后，用对应RSA私钥解密即可得到原始密码

3. 后端存储强制规范 #

绝对禁止明文存储用户密码，拿到原始密码后第一时间做加盐哈希处理再入库，Node.js端示例方案如下：

• 安装bcrypt依赖：

  npm install bcrypt
  

• 密码哈希存储代码：

  const bcrypt = require('bcrypt')
  const SALT_ROUNDS = 10
  // 新用户注册/修改密码时，哈希处理后再存库
  const hashedPassword = await bcrypt.hash(原始密码, SALT_ROUNDS)
  // 登录校验时，直接对比哈希值，不需要解密
  const isPasswordValid = await bcrypt.compare(用户提交的密码, 数据库存储的哈希值)
  

  该方案下哪怕数据库被拖库，攻击者也无法还原出用户的原始密码

额外安全建议 #

• 不要自研加密/哈希算法，全部使用业界公认的成熟开源库实现
• 登录成功后的身份凭证建议存储在带HttpOnly、Secure属性的Cookie中，不要存储在localStorage里，降低XSS攻击盗取凭证的风险

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