On: Show HN: A CSS Keylogger

[criswell]

Hopefully most are updating the property and not the attribute.

[poxrud → criswell]

For those that are confused, updating the property would mean:

  this.input.value = 'password'; 

This would be fine. However updating the attribute (the way React recommends it with controlled components) would be something like:

  <input type="text" value={this.state.value} onChange={this.handleChange} />

This would be vulnerable to the the CSS keylogger.

[dimgl → poxrud]

That being said, you might be thinking about this incorrectly if you're doing this.

You can use a form and grab the values on submission.

    <form onSubmit={this.handleSubmission}>
      <input type="password" name="password" />
    </form>

    this.handleSubmission = event => {
      // access to event.target.password.value
    }

[tshaddox → dimgl]

You still lose things like validation on blur and displaying real-time password strength.

[always_good → dimgl]

It might be a fair workaround, but it sucks to regress to storing truth in the DOM.

[Cyranix → poxrud]

I believe using `defaultValue` instead of `value` would be an appropriate remediation.

[elliotec → Cyranix]

Do you mind expanding on this a little? Or linking to a documentation or something

[NoInkling → elliotec]

I think he/she essentially means using an uncontrolled input instead of a controlled one.

https://reactjs.org/docs/uncontrolled-components.html#defaul...

[elliotec → NoInkling]

Thanks!

[humblebee → criswell]

It updates the attribute, you can see this pretty easily by going to the Instagram website. If you inspect the password field in the browser, when you type in a value you can see it reflected on the `value` attribute of the input element.

[vog → criswell]

But that requires extra work, compared to simple JSX-based React code, doesn't it?