How to turn off autocomplete in password type

I was design a login form for my website. As part of security improvement for the application, I need to turn off autocomplete for the password field. To be more specific I need to prevent browser from saving the password. I followed the traditional way by turning off form autocomplete. But unfortunately it’s not working.

The following bullet points are my findings.

  • The ability for websites to disable the password manager using autocomplete = “off”  is being removed in Firefox 30 (bug 956906)
  • The bug is resolved in IE 9 onwards.
  • Chrome now ignores autocomplete='off' by default (issue 177288). This has been discussed in several places .

Most of the modern browser drops the support for the autocomplete for the password field.This is mainly due to security threats.

Now the developers have the challenge to turn off autocomplete for the password field. I have reviewed few documents and notes. Finally I found few work around.

  1. Option 1:  One step login process. Use multiple input text/password combination in the login form, It will confuse browser, so the username field and password field are in a single login form.
         <form>
            <input type="text"  id="txtUserName"/>
            <input type="hidden" id="txtHidden" />
            <input type="password" id="txtPassword"/>
        </form>
    
  2. Option 2: Two step login process. Like Google implemented for their account login. You need to ask username on one page after validation user name the page is redirected to password page. Two pages for login below is the new Google login screen shot.
    1. First page accepting username only.
      firstPage
    2. The second Page accepts password only.
      NextPage
  3. Option 3: One step login process. Rewrite password field after click login button and just before submission of form to server. The web browser saving the value in the password and username field just before submitting the form. Using some client side scripting like JavaScript, You can rewrite the entered password to some encrypted value.
    1. Password before clicking login Button.
      Password_bforeSubmit
    2. Password field after clicking login Button.
      Password_afterSubmit
      Browser only saves the value on the second screen shot, that is your encoded password value. You are safe man.

I always recommend option 2, as I experiment all three options. Be safe don’t allow anyone to store or steal your password anywhere on web. Safety first

Wish you happy coding.

Reference:

Create Simple Please Wait Dialog with Twitter Bootstrap 3

 As I was searching for a responsive design pattern for my website project, I finally landed on Twitter Bootstrap. It’s quite simple and well documented. Even a developer (like me) can create a professional website with the help of twitter bootstrap. Kudos to bootstrap creators!!!.  I want to show a “please wait” dialog in my website project, which will let the user know that application is processing something in background. Here am using modal, progress bar and glyphicons,the components that are present in bootstrap default package. This modal dialog cannot dismiss by user manually. So here is my html for dialog looks like.

<!-- Modal Start here-->
<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1"
    role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-time">
                    </span>Please Wait
                 </h4>
            </div>
            <div class="modal-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-info
                    progress-bar-striped active"
                    style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal ends Here -->

Add the above html code to your webpage. Next step is to trigger the modal dialog. You can trigger via a jQuery like

      $('#myPleaseWait').modal('show');

On your cal back you can hide the “please wait” dialog like

      $('#myPleaseWait').modal('hide');

The following example is self-explanatory.

        function CallServerFunction() {
            $('#myPleaseWait').modal('show');
            $.ajax({
                url: "test.html",
                success: function (data) {
                    $('#myPleaseWait').modal('hide');
                    console.log('The page has been
successfully loaded');
                },
                error: function () {
                    $('#myPleaseWait').modal('hide');
                    console.log('An error occurred');
                }
            });
        }

This will looks like an infinite progress. So, here is how the whole thing will look.

please wait image
Please wait modal mock up.

The black background is the default for modal dialog in Bootstrap. Thanks, Happy Coding.