如何防止通过浏览器Inspect Element查看登录账号密码？

绝对不能把正确的账号密码放在前端代码里——不管你怎么加密、混淆，前端代码对所有访问者都是完全透明的，迟早会被扒出来。正确的做法是把验证逻辑全搬到后端：

• 后端接管验证核心
  把正确的账号密码（别存明文，存哈希值，比如用bcrypt算法加密后的字符串）放在后端的数据库或者私密配置文件里，完全不暴露给前端。前端只负责收集用户输入的账号密码，通过POST请求（一定要用HTTPS）传给后端接口，由后端来对比验证，再返回登录成功/失败的结果。

• 前端只留交互逻辑
  删掉前端script里的正确账号密码，只保留获取输入、发请求、处理结果的代码。比如简化后的前端代码大概是这样：

  document.querySelector('#login-submit').addEventListener('click', () => {
    const user = document.querySelector('#username').value;
    const pass = document.querySelector('#password').value;
    fetch('/internal/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: user, password: pass })
    })
    .then(res => res.json())
    .then(result => {
      if (result.valid) {
        window.location.href = '/internal/dashboard';
      } else {
        alert('账号密码不对');
      }
    });
  });
  

• 额外加固措施（针对内部员工场景）

  • 限定登录页面只能在公司内网IP访问，直接拦掉外部请求；
  • 给登录接口加验证码，防止批量暴力破解；
  • 后端密码一定要存哈希值，哪怕数据库泄露，也不会直接暴露明文密码。

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