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

ifi*_*ore 10 html javascript reactjs

有一个关于 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"
   />
Run Code Online (Sandbox Code Playgroud)

<input
 type="password"
 name="password"
 value={this.state.password}
 onChange={this.handleChange}
 data-minlength="3"
 data-maxnlength="20"
 data-message="Please enter your password"
 />
Run Code Online (Sandbox Code Playgroud)

handleChange() 是这样写的:

  handleChange = e => {
   this.setState({
    [e.target.name]:e.target.value
  })}
Run Code Online (Sandbox Code Playgroud)

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

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

Mar*_*coS 11

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

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

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