Disable save password prompt on login forms using CSS

Browsers automatically prompt users to save their password after login. In fact, this functionality provides a big advantage for allowing the user to login afterwards without reentering his credentials again. However, it also has its disadvantages and some people considers it as a security leak since anyone can view your saved passwords using the browser settings.

In this tutorial, we provide a workaround solution using html and CSS which disables the “Save Password”¬†prompt on login forms and works perfectly on all popular browsers.

1- Input[type=”password”]

When a browser sees an input element of type “password”, it directly displays the “Save Password” prompt after form submission (regardless whether the password element is defined inside a form or not).

Let’s reproduce the problem and explain how our workaround works.

For demonstration purposes, we create a web application and define a typical login page under WEB-INF as the following:

Our page looks like:Login page

After filling the credentials and clicking on login, the following prompt is displayed by the browser:Save password prompt

2- How to disable “Save Password” prompt using CSS

Our solution is of 3 steps:

  • Change the type of password textbox to be “text” instead of “password”, this way the browser won’t deal with it as a password.
  • Download the “security-disc” font files/images from here.
  • Change the font of password textbox to look like discs so that no one around sees your password while you enter it.

2.1. Change type of password

Change the type of password element to “text” as the following:

2.2. Download “security-disc”¬†files

Download the “security-disc” font/images files then define the font files under WEB-INF/fonts and font images under WEB-INF/images.

2.3. Change the font of password

In login.html, define a custom font called ‘text-security-disc’ using @font-face then set the font-family of password to be ‘text-security-disc’.

Now if you open the updated login page, you won’t be prompted anymore for saving your password.

P.S: This solution works perfectly on Chrome(67.0.3396.99), Firefox(61.0.1), Edge(42.17134.1.0) and IE(11)

 

Hussein Terek

Founder of programmergate.com, I have a passion in software engineering and everything related to java environment.

You may also like...

Leave a Reply

avatar