Storing form inputs in component state in React.js, specifically passwords

Question

got a question about forms in React.js. I don't actually have an issue, but was wondering if there were any flaws in my approach.

I have a simple form, with two inputs for both email and password, like so:

  <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"
   />

and

<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() is written as so:

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

My question is, is that are there any vulnerabilities in this code? When using React Dev Tools, I can track the components internal state, and the password appears as plaintext. I'm unsure if this means that it is possible for other sources to acquire the password through tracking the component's state.

Sorry if this question has been answered before, I did a quick search but could not find something that was specifically on this topic. Thanks for your time.

Answer 1

No, no vulnerability here: the user will be able to see the password while it is inside her browser, after she inputs it...

A password should not be a secret for it's owner... :-)

Of course you will use https protocol if you send the password to a server, otherwise it will be visible on the cable, an that is a security issue!

Answer 2

I agree with @MarcoS there is no security issue.

I would add if a thief knows how to read the state in dev tools he can also do this:

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