Chrome warning "[DOM] Password forms should have (optionally hidden) username fields for accessibility" in console even with hidden username field

update chrome
unsafe website warning
google malware warning removal
why am i getting a security warning on google
enable phishing and malware protection chrome 2019
chrome extensions
website is flagged as dangerous by google.
google browser warning

When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the follwing warning:

[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)

Helpfully, the html of the form in question is also printed to the console in the next line, and quite clearly contains a hidden username field:

<form data-ember-action data-ember-action-436=​"436">​
  <div class=​"form-group">
    ​<label for=​"newpasswordone">​Password​</label>​
    <input type=​"password" autocomplete=​"new-password" placeholder=​"Enter your new password" id=​"ember437" class=​"form-control ember-text-field ember-view" data-op-id=​"0">​

    <label for=​"newpasswordtwo">​Password (again)​</label>
    ​<input type=​"password" autocomplete=​"new-password" placeholder=​"Re-enter your new password" id=​"ember438" class=​"form-control ember-text-field ember-view" data-op-id=​"1">​
    <input type=​"hidden" name=​"username" autocomplete=​"username" value=​"a_b">
​  </div>​
  <button disabled type=​"submit" class=​"btn btn-default">​Reset password​</button>​​
</form>​

I tried some minor variations -- unhiding the username field, marking it readonly, moving it outside the div -- without affecting the warning. How does Chrome expect to be served the username?

Problem occurs with Chrome 63 and 64.

I had the same problem. After some digging, I found that it needs to be an input element with the type text. By "optionally hidden" they mean that you may hide it with CSS.

If you just add an input with the name email or username chrome gives you another warning saying that input elements should have autocomplete attributes. So this is what I came up with to fix these errors:

<input type="text" name="email" value="..." autocomplete="username email" style="display: none;">.

You will need to manually render the actual username or email into the elements value attribute.

Also, keep in mind that inline styles are not a very good practice.

Manage warnings about unsafe sites - Android, You'll see a warning if the content you're trying to see is dangerous or deceptive. These sites are often called "phishing" or "malware" sites. Get warnings about  Picked up by security specialist Sophos, Google has quietly issued a warning that Chrome has discovered a new security flaw across Windows, Mac and Linux that it labels "critical" and it urges

I had this same situation. Everything seemed be ok but I still got this verbose.

On my case helped me a relocate this userName input from end of form to begin of that.

It was my code before my changes:

<form id="changePass">
    <div class='modal-dialog'>
       <input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>

       <div class="modal-footer">
          <button type="button" id="change-password-ok-button">Ok</button>
          <button type ="button" data-dismiss="modal">Close</button>
       </div>
   </div>
   <input id="userName" name="username" autocomplete="username" value="">
</form>

And this is current code:

<form id="changePass">
   <input id="userName" name="username" autocomplete="username" value="">
   <div class='modal-dialog'>
       <input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
       <input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>

       <div class="modal-footer">
          <button type="button" id="change-password-ok-button">Ok</button>
          <button type ="button" data-dismiss="modal">Close</button>
       </div>
   </div>
</form>

Google Issues 'Critical' Update Warning For Chrome Users, Chrome users need to take urgent action after Google issued a 'critical' warning for all 2 billion users Google has fixed a security issue relating to Chrome and the internet giant wants two billion users to download the latest version of the web browser. As noted by Forbes , the warning was initially picked up by security specialist Sophos and sees Google quietly reveal that Chrome has a critical security flaw across Windows, Mac and Linux, but the issue has been fixed.

you must put the input tag inside another tag for example:

  <form action="">
<div>
  <input type="text" autocomplete="username">
</div>
<div>
  <input type="password" autocomplete="password">
</div>
<div>
  <input type="password" autocomplete="password">
</div>

I had this same situation in VueJs when i use rendering conditional v-if v-else and i try put input tag inside new tag and it's work for me

"This file is dangerous, so Chrome has blocked it" message received , How do I get rid of security error on Google Chrome? Pausing Windows 10 Updates is a smart move until a fix arrives for Chrome's problems . Gordon Kelly. As it stands, Microsoft is only pushing the May 2020 update to Windows 10 users who manually

Update Google Chrome - Computer, , you might sometimes notice that your browser looks different. The biggest addition is that Chrome will now warn you when your password has been stolen as part of a data breach. Google has been warning about reused passwords in a separate browser extension or

Google Chrome warning: Billions of users need to update their , GOOGLE CHROME users need to update their browsers right now with a vitally important patch being pushed out to more than two billion  What this means is that Chrome browser users will see a popup that notifies them the extension has been disabled, along with a warning that the "extension contains malware" if they try to

Chrome WARNING: Check your browser now to avoid these new , SECURITY researchers have uncovered 500 extensions for the popular Google Chrome web browser, which attempt to trick you into inputting  Edge users can access those extensions given the common platform, but Google has now started warning those users that to do so carries risk. Those users, it says, will be more secure on Chrome.

Comments
  • Similar but for angular: stackoverflow.com/questions/48536209/…
  • Thanks. Sounds plausible enough, but unfortunately, changing the input type to text (or even "username") did not change the warning message (except for the reproduced html node content, of course), even when I do not hide the field. :-(
  • I do have such field in my form and even it is not hidden at the moment and still getting this error :/ i.postimg.cc/7Z81vcgD/Screenshot-at-Apr-26-14-41-29.png
  • I'm not familiar with VueJS. I could imagine that the analyzer runs before the code is executed that renders the form field. Have you tried compiling the project and see if the warning is still there?
  • Moving the hidden field to the top of the form removed the warning for me.