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 ，您可能需要加密密码（例如，企业用户可能被迫使用与某些HTTPS代理的不安全HTTP连接）。但在这种情况下，您可以向服务器证明客户端具有密码而不发送（甚至是加密的，加密密钥必须通过不受信任的方式与客户端共享网络这么糟糕的想法）通过发送密码的哈希加上一些非秘密伪随机的东西（并发送伪随机的东西）。

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

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

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

3 个答案: