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

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

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

当然，如果您将密码发送到服务器，则将使用def gen_str(some_string, sep): j=0 guard = len(some_string)-1 for i,s in enumerate(some_string): if s == sep: yield some_string[j:i] j=i+1 elif i!=guard: continue else: yield some_string[j:]协议，否则将在电缆上看到，是安全问题！

Answer 2

可以在两个层次上回答您的问题：

第一：您需要授权才能在安全的环境中进行操作，而浏览器不在那儿。例如，如果您要保护表单提交，则取决于服务器端代码来处理提交以验证验证码响应是否符合预期。只要您不将客户端状态用作唯一的验证/授权来源（如密码），便可以真正控制客户端状态。

第二：我建议您使用password-hash一个node.js库来使用散列密码。我没有测试自己，但这不应该成为问题。当然，https协议是客户端和服务器之间进行通信的方式。

Answer 3

当然必须保护密码并将其禁用才能显示，可以使用refs而不使用onChange事件来避免密码

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

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

const password = this.refs.password.value;

Answer 4

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

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

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

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

4 个答案: