Filling login page fails because of additional "hidden" user name fields in the form

[ghost]

I regularly run into a login page that contains the following code where the user name fails to be filled in. Password is filled in, however.

<form>
  <input style="opacity: 0; width: 0; height: 0;" id="hidden_username_chrome_1" type="text" autocomplete="off">
  <input style="opacity: 0; width: 0; height: 0;" id="hidden_pass_chrome_1" type="password" autocomplete="off">

  <input type="text" placeholder="" name="username" value="" autocomplete="off" required="">
  <input type="password" placeholder="" name="password" value="" autocomplete="off" required="">
  <input type="submit" value="Sign In">
</form>

I have cleaned up the code and removed 4 additional "hidden" elements from this example, as they were just repetitions of the first two, except for the id attribute suffix ending in _2 / _3. This works for reproducing the issue.

Applying this rule via Stylus (or an ad blocker) works around the issue with PfP:

*[id^='hidden_'] {
  display: none;
}

(I don't want to share the exact site name, but given that this is an off-the-shelf system, the issue would probably affect a larger population, on different domains/subdomains.)

[palant]

I think that the reason I originally decided not to ignore zero-size input fields was Google. Their login page changed however, it’s the usual awkward two-step login now. So maybe it’s time to revisit this decision.

[palant]

I improved the way hidden fields are detected, hopefully this works.