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

Answer 3

Well to respond your questions on two layers:

First: You'll need authorization to take place in a secured setting, and the browser isn't that place. If you're guarding a form submittal, for example, it's up to you to have the server-side code that processes the submittal to validate that the captcha response is as expected. The fact that client-side state can be manipulated shouldn't really matter as long as you're not using that as your sole source of validation/authorization like passwords .

Second: I recommend that you use password-hash a node.js library to use hashed passwords . I didnt tested myself but that shouldn't be an issue. Of course https protocols is how the client and server need to communicate.

Answer 4

Of course the password must be protected and disable to be revealed, it could be avoided using refs and without onChange event

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

And when the form is submitted you can get the password as follow

const password = this.refs.password.value;