The Technoblog

Since Google Chrome build 56, password fields will trigger a warning if the page in not secured (read: HTTPS).

If your are a webmaster, you may even have received this kind of alert message from Google like this one :

Unsecure password collection will trigger warning display in Chrome 56 for “your site”

The password field is a specific HTML field type, that will automatically mask the typed in characters, like the one below (yellow background) :

To avoid this warning, the best option is of course to move that page to HTTPS. However, if you cannot migrate the page to HTTPS yet because it is too expensive, or requires too much code changes, or you simply don’t want to implement HTTPS because it’s not worth the effort (nothing important behind this password field), here are 2 tricks to avoid the chrome 56 password warning message.

Avoiding the Chrome 56 password warning

The first trick below will hide the warning message as long as the password field is not used by the user. This trick is especially useful when a login area is embedded on all pages of your website, is the header or menu for instance.

To implement this trick, in the HTML source code, simply change the password field type to something different, and add a “onfocus” javascript event, that will revert to the actual password type field. here an example :

After the change, the html input markup will look like:

To implement this trick on your website, reproduce the changes from the “original ocde” above to the “modified code”.

With this trick, the Google Chrome 56 warning message will not fire until the fake password field is active.

If you want to avoid the warning message even with the fake password field in use, you’ll need the second trick below

Fully removing the Chrome 56 password warning

The ultimate way to remove the Googl Chrome 56 “not secure” warning is to … definitely change the field type from password to something else. I recommend not using the “text” type, to easy finding back the original password fields. I personnaly use the “novapass” field type.

As a side effect of this trick, the password will be displayed as the user type in, of course.

To implement this hack, change a typical password field like :

By this kind of code :

We implemented this 2 tricks on several websites, and passes the Google Chrome 56 test. What about you ?