在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时，我可以追踪组件的内部状态，并且密码以明文形式出现。我不确定这是否意味着其他来源可以通过跟踪组件状态来获取密码。

如果此问题以前已经有答案，请原谅我，我做了一个快速搜索，但没有找到针对此特定主题的内容。感谢您的时间。

- ifiore

Answer 1

这里并不存在漏洞：用户在输入密码后可以在浏览器中看到密码...

密码不应该对其所有者是一个秘密... :-)

当您向服务器发送密码时，当然要使用 https 协议，否则它将在电缆上传播，并且这就成为了一个安全问题！

- MarcoS

Answer 2

我同意@MarcoS的说法，这里没有安全问题。

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

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

- spedy

Answer 3

首先，要回答你的问题，有两个层面：

第一：您需要获得授权才能在安全环境中进行操作，而浏览器不是这样的地方。例如，如果您正在保护一个表单提交，那么就由您自己编写服务器端代码来处理提交，并验证验证码响应是否符合预期。客户端状态可以被操纵的事实并不重要，只要您不将其作为您唯一的验证/授权来源，比如密码。

第二：我建议您使用password-hash这个node.js库来使用哈希密码。虽然我没有亲自测试过，但这不应该成为问题。当然，https协议是客户端和服务器需要通信的方式。

- vcygni

Answer 4

当然，密码必须受到保护，并且被禁止显示，可以使用refs并且不需要onChange事件来避免此问题。

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

当表单提交时，您可以按照以下方式获取密码。

const password = this.refs.password.value;

- ElChava