Password is visible when inspecting the element

[eng-almeida]

If I add this code to my form

<Field name="password" component={renderField} type="password" className="modal--txt-field" />

and after that I inspect the element, I'll be able to see the inserted password. This is dangerous specially for those cases you save form credentials on your browser.

[dtipson]

The point of a password field is to hide what you're typing in from anyone looking over your shoulder (which is why some password fields even allow you to unhide the password so that you can see what you're typing), not to make the information absolutely secret even to the web-inspector, which is basically impossible. Heck, it's always available via $0.value on the field.

[justingreenberg]

to @dtipson's point...

[eng-almeida]

@dtipson I'm aware of what you said ;) Anyway I believe it's not usual to have 'value' property exposed (like this) in a password field. Furthermore on previous versions of redux form this wasn't happening. Just my 2 cents about this subject!

[baronswindle]

@eng-almeida This happens in previous versions of redux-form for me. This really doesn't have much to do with redux-form. It has much more to do with the idea of controlled components in React.

[eng-almeida]

This is happening in most of the previous versions, as you said @baronswindle . Sorry about that. I've just realised that I checked an alpha version http://redux-form.com/6.0.0-alpha.4/examples/submitValidation/ :) Anyway, IMHO from a HTML semantic perspective is not usual or right to have value property on a password input.

[ifranke]

I do not understand the problem. On your local computer you can always get the typed password, value property or not, even if your site uses TLS via https.

[teofilomonteiro]

Hey, @ifranke the problem is that you by inspecting can reach easily to the user password. In other sites like facebook, twitter they hide that value property in the password field. Is an extra caution since not everybody has the same level of skills to hack.

[dtipson]

But it's not actually hidden just because it's not visually in the markup on the Chrome element tab: it's literally a normal prop on the element in the console, on all sites. ($0.value)

The only password you can find through this method, though, is your own: in a field you've just typed it into but not submit. Obscurity is not security here, and obscuring the password in an html form is just a measure to avoid anyone looking over your shoulder to see it as you type it in, not to conceal it from the client browser, let alone its developer tools!

[gustavohenke]

Yup, this is definitely a problem more related to React controlled components, as @baronswindle said.

I created a simple demo to reproduce the issue: http://codepen.io/gustavohenke/pen/WRxgMd
If you go to debug mode and start inputting values onto the field, you'll see the HTML changing according to your input.

The alternative is to give up on this and migrate to uncontrolled components.

[gustavohenke]

Because this issue saw almost no activity for almost a whole year, I'm closing it.

[abhayszambare]

surprisingly its to easy to get password from google chrome using inspect element.

[Ankcorn]

I am having this issue. Has anybody found a way to resolve it yet?

[dkrieger]

Here is an example of what makes passing an explicit value attribute to a password field different than accessing an otherwise "hidden" value property.

https://mobile.twitter.com/captbaritone/status/966051583132758016?s=09

[JochemG]

Don't set the "value" prop. This makes it an uncontrolled component. You can still listen to the onChange to track the value. If you need to clear the value (without getting React controller/uncontroller warning) I guess you can just change the "key" prop on the input to force rerender, which should clear the field.

Hope this helps :)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.