在 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 开发工具时，我可以跟踪组件的内部状态，密码显示为明文。我不确定这是否意味着其他来源可以通过跟踪组件的状态来获取密码。

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

Answer 1

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

密码不应该是其所有者的秘密... ：-(

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

Answer 2

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

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

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

Answer 3

好吧，在两层回答您的问题：

第一：您需要授权才能在安全设置中进行，而浏览器不是那个地方。例如，如果您要保护表单送审，则由您决定让处理送审的服务器端代码来验证验证码响应是否符合预期。客户端状态可以纵的事实应该并不重要，只要您不将其用作唯一的验证/授权来源(如密码(。

第二：我建议您使用密码哈希节点.js库来使用哈希密码。我没有测试自己，但这应该不是问题。当然，https协议是客户端和服务器需要通信的方式。

Answer 4

当然，密码必须受到保护并禁用才能显示，可以使用 refs 避免使用，而无需 onChange 事件

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

提交表格后，您可以按如下方式获取密码

const password = this.refs.password.value;