如何将加密形式的密码从 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 access token）。令牌过期（通常从一个小时到几天不等），可以在给用户带来最小不便的情况下被撤销（他不必创建新密码）并且不足以更改用户的密码或电子邮件（通常用户必须为此输入旧密码）并执行其他重要的帐户操作，因此即使使用被盗令牌造成一些损坏，用户至少可以恢复帐户。

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

How to send password in encrypted form from ReactJS to ExpressJS?

javascript

node.js

reactjs

nodemon