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