如何将加密形式的密码从ReactJS发送到ExpressJS？

Question

const form = {
        firstname: "",
        lastname: "",
        email: "",
        password: "",
        gender: "",
        dob: "",
        username: ""
};

export default class Login extends React.Component {
  constructor (props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
    }
  }

  handleSubmit (event) {
    event.preventDefault();
    api.signin(this.state)
  }

  handleChange (event, type) {
    form[type] = event.target.value;
    this.setState({
      form
    })
  }

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
          <a className="navbar-brand" href="#">ChatBox</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item active">
                <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">Link</a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">Disabled</a>
              </li>
              <li className="nav-item dropdown">
                <a className="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown">Dropdown</a>
                <div className="dropdown-menu" aria-labelledby="dropdown01">
                  <a className="dropdown-item" href="#">Action</a>
                  <a className="dropdown-item" href="#">Another action</a>
                  <a className="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
        <main role="main" className="container">
          <div className="starter-template">
            <h1>Register for ChatBox</h1>
            <form >
              <div className="d-flex justify-content-center bd-highlight mb-3">
                <div className="p-2">
                  <label htmlFor="firstname">First Name</label>
                  <input type="text" className="form-control" id="firstname" placeholder="First Name" onChange={
                    (e)=>{ this.handleChange(e, 'firstname')}
                  }/>
                </div>
                <div className="p-2">
                  <label htmlFor="lastname">Last Name</label>
                  <input type="text" className="form-control" id="lastname" placeholder="Last Name" onChange={
                    (e)=>{ this.handleChange(e, 'lastname')}
                  } />
                </div>
              </div>
              <div className="form-group col-md-6">
                <label htmlFor="inputEmail4">Email</label>
                <input type="email" className="form-control" id="inputEmail4" placeholder="Email" onChange={
                    (e)=>{ this.handleChange(e, 'email')}
                  }/>
              </div>
              <div className="form-group col-md-6">
                <label htmlFor="username">Username</label>
                <input type="text" className="form-control" id="username" placeholder="Username" onChange={
                    (e)=>{ this.handleChange(e, 'username')}
                  }/>
              </div>
              <div className="form-group col-md-6">
                <label htmlFor="inputPassword4">Password</label>
                <input type="password" className="form-control" id="inputPassword4" placeholder="Password" onChange={
                    (e)=>{ this.handleChange(e, 'password')}
                  }/>
              </div>
              <div className="form-group col-md-6">
                <label htmlFor="gender">Gender</label>
                <select id="gender" className="form-control" onChange={ (e)=>{ this.handleChange(e, 'gender')} }>
                  <option >Choose...</option>
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                </select>
              </div>
              <div className="form-group col-md-6 " >
                <label htmlFor="date">D.O.B</label>
                <input type="date" className="form-control" id="date" placeholder="date" onChange={ (e)=>{ this.handleChange(e, 'dob')} }/>
              </div>
              <div className="form-group col-md-2">
                <input type="submit" onClick={this.handleSubmit} className="form-control bg-info text-white" id="submit" placeholder="Password" />
              </div>
            </form>
          </div>
        </main>
      </div>
    )
  }
}

将表单数据存储在这样的状态或者有更好的方法是一种好的做法吗？

输入的密码可以看作是devtools的纯文本.如何避免这种情况我的意思是任何加密密码并将其发送到后端的方法.

我对此很新.如果有人检查这是否是编写代码的好习惯,将会很有帮助.

Answer 1

只要您使用HTTPS连接并将其作为表单参数发送,就不需要在将前端密码发送到后端之前加密前端中的密码.但是,您不应将密码存储在浏览器本地存储中,您可以向后端询问您将存储为会话标识符的连接令牌.

Answer 2

不需要这样的加密.实现自己的加密是没有意义的,因为HTTPS是出于这个原因而创建的.

Answer 3

如前所述，您无法阻止用户在浏览器中查看密码（此外，他是用户，因此他已经知道密码）。存储密码是有风险的，因为它会将其暴露给本地文件系统攻击（如果您为每个用户使用不同的密钥，那么加密可能很有用）。

如果您不信任 SSL/TLS，您可能想要加密密码（例如，企业用户可能被迫使用不安全的 HTTP 连接到某些 HTTPS 代理）。但是在这种情况下，您可以通过发送向服务器证明客户端拥有密码而根本不发送它（即使是加密的，为此加密密钥必须通过不受信任的网络与客户端共享，这是个坏主意）密码的散列加上一些非秘密的伪随机内容（并发送伪随机内容）。

话虽如此，您不应该在客户端以任何形式存储用户的密码（在进行身份验证时，您仍然可以发送从密码派生的哈希值，而不是密码本身，以防 HTTPS 被泄露）。

存储服务器在初始身份验证后生成的令牌（例如OIDC 访问令牌）。令牌过期（通常从一小时到几天不等），可以在给用户带来的不便最小的情况下撤销（他不必创建新密码）并且不足以更改用户的密码或电子邮件（通常用户必须为此输入旧密码）并执行其他关键的帐户操作，因此即使使用被盗的令牌造成了一些损坏，用户也至少可以恢复帐户。