2

I have this code for input with type="password"

<input
  type="password"
  id="password"
  value={form.password}
  onChange={handlePasswordChange}
/>

It works, but I noticed, that in develeopers console "Elements"you can actually see value of password field:

<input type="password" class="form-control undefined" value="qwerty">

Is it ok, that it shows password like this? Is there a way to hide it? Should i use uncontrolled componenets instead of controlled?

Kerchik
  • 53
  • 1
  • 7
  • As long as you're not setting the value to an actual password, all the user would be able to see is the value they've entered. – David Sep 03 '21 at 10:40
  • That's good question. Even in the Google SignUp we can see that. Since you use this feature whenever user fills up the form him/her-self this is not a problem. – Yaya Sep 03 '21 at 10:56

1 Answers1

5

type="password" only cosmetically hides the password. The input value is always accessible via JS (using it's .value property). So when someone opens DevTools, he or she will be able to get the password regardless.

Itay Ganor
  • 3,965
  • 3
  • 25
  • 40