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.

MarcoS · Accepted Answer · 2019-02-06 16:59:48Z

16

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!

edited Feb 6, 2019 at 16:59

answered Feb 6, 2019 at 16:54

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

spedy · Accepted Answer · 2020-09-24 20:02:12Z

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

answered Sep 24, 2020 at 20:02

spedy

2,37027 silver badges26 bronze badges

Comments

vcygni · Accepted Answer · 2019-02-06 17:13:11Z

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.

HoldOffHunger · Accepted Answer · 2020-08-06 21:38:11Z

1

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;

edited Aug 6, 2020 at 21:38

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Jul 10, 2020 at 4:49

ElChava

111 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related