在 React.js 中以组件状态存储表单输入，特别是密码

Question

有一个关于 React.js 表单的问题。 我实际上没有问题，但想知道我的方法是否有任何缺陷。

我有一个简单的表单，其中包含电子邮件和密码的两个输入，如下所示：

  <input
   type="email"
   name="email"
   value={this.state.email}
   onChange={this.handleChange}
   data-message-required="Please enter your email address"
   data-message-email="Please enter a VALID email address"
   />

和

<input
 type="password"
 name="password"
 value={this.state.password}
 onChange={this.handleChange}
 data-minlength="3"
 data-maxnlength="20"
 data-message="Please enter your password"
 />

handleChange() 是这样写的：

  handleChange = e => {
   this.setState({
    [e.target.name]:e.target.value
  })}

我的问题是，这段代码中是否有任何漏洞？ 使用 React Dev Tools 时，可以跟踪组件内部状态，密码显示为明文。 我不确定这是否意味着其他来源可以通过跟踪组件的状态来获取密码。

抱歉，如果之前已经回答过这个问题，我进行了快速搜索，但找不到专门针对此主题的内容。 谢谢你的时间。

Answer 1

不，这里没有漏洞：用户将能够在她的浏览器中看到密码，在她输入密码之后......

密码不应成为其所有者的秘密... :-)

当然，如果您将密码发送到服务器，您将使用https协议，否则它将在电缆上可见，这是一个安全问题！

Answer 2

我同意@MarcoS 没有安全问题。

我要补充的是，如果小偷知道如何读取开发工具中的状态，他也可以这样做：

document.querySelector("[type=password]").value

Answer 3

好吧，分两层回答你的问题：

第一：您需要在安全设置中进行授权，而浏览器不是那个地方。 例如，如果您要保护表单提交，则由您拥有处理提交的服务器端代码以验证验证码响应是否符合预期。 只要您不将客户端状态用作验证/授权的唯一来源（如passwords ），就可以操纵客户端状态这一事实并不重要。

第二：我建议你使用password-hash一个 node.js 库来使用hashed passwords 。 我没有测试自己，但这应该不是问题。 当然 https 协议是客户端和服务器需要通信的方式。

Answer 4

当然，密码必须受到保护并禁止显示，使用 refs 和没有 onChange 事件可以避免

<input type="password" ref="password"/>

提交表单后，您可以获得如下密码

const password = this.refs.password.value;