Vue implements sample code to disable browser from remembering password function

Find information

Some methods found on the Internet:

Use autocomplete="off" (not supported by many modern browsers)
Use autocomplete="new-password"
Add an input box with the same name before the real account and password box
Use the readonly attribute and remove it when focused
Initialize the input box's type attribute to text, and change it to password when focused
Use type="text" to manually replace the text box content with asterisks "*" or dots "●"

Implementation process

Fields used

data() {
 return {
   username: '',
    password: '',
  }
}

Since modern browsers no longer support autocomplete="off", we simply gave up setting the password box and used autocomplete="new-password" directly. We have tested that it works in Chrome (v88.0.4324.104), Edge (v88.0.705.56) and Firefox (v67), but Firefox (v85) will still prompt us to remember the password.

<el-input v-model="username" type="text" name="text" placeholder="account" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="password" autocomplete="new-password"></el-input>

refer to:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility

In the process of solving the prompt of high version of Firefox, I tried methods 3/4/5, but the results were not satisfactory. However, I found that as long as the value in the final password box of Firefox is an asterisk "*" or a small dot "●", it will not prompt to remember the password (I don’t know if it is correct, you can test it yourself), so I added a new field pwdCover to associate the input box, and use password to actually pass the value.

templete

<el-input v-model="username" type="text" name="text" placeholder="account" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="password" autocomplete="new-password"@input="setPassword"></el-input>

script
data() {
 return {
   username: '',
    password: '',
    pwdCover: '',
  }
},
method:
 login() {
   this.pwdCover = this.pwdCover.replace(/\S/g, '●');
    // Login request, restore pwdCover if failed
    this.pwdCover = this.password;
  },
  setPassword(val) {
   this.password = val;
  }
}

I sent it to my colleagues on the project with full confidence, but it turned out to be a failure. The on-site environment was as follows:

Operating system: Windows 7, Windows 10
Browser: Chrome v74.0.3729.108

After I installed the same version of Google Chrome, I found that the problem still did not occur. My operating system is Windows 10. I don’t know what went wrong. In the end, I chose method 6.

final

templete

<el-form-item>
 <el-input v-model="username" type="text" name="text" placeholder="account" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>
</el-form-item>
<el-form-item>
 <el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="Password" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
</el-form-item>

script

setPassword(val) {
  let reg = /[0-9a-zA-Z]/g; // Only letters and numbers are allowedlet nDot = /[^●]/g; // Non-dot characterslet index = -1; // Newly entered character positionlet lastChar = void 0; // Newly entered characterlet realArr = this.password.split(''); // Real password arraylet coverArr = val.split(''); // Text box displays password arraylet coverLen = val.length; // Text box string lengthlet realLen = this.password.length; // Real password length// Find the newly entered characters and positionscoverArr.forEach((el, idx) => {
    if(nDot.test(el)) {
      index = idx;
      lastChar = el;
    }
  });
  // Check if the input character meets the specification. If not, remove the character if(lastChar && !reg.test(lastChar)) {
    coverArr.splice(index, 1);
    this.pwdCover = coverArr.join('');
    return;
  }
  if (realLen < coverLen) {
    // Add new characters realArr.splice(index, 0, lastChar);
  } else if (coverLen <= realLen && index !== -1) {
    // Replace characters (select one or more characters to replace directly)
    realArr.splice(index, realLen - (coverLen - 1), lastChar);
  } else {
    // Delete characters. Because val is all ●, there is no way to match. I don't know whether the characters are deleted from the end or the middle. It is difficult to handle password after deleting several characters. So we can judge by the cursor position and the length of val. let pos = document.getElementById('pwd').selectionEnd; // Get the cursor position realArr.splice(pos, realLen - coverLen);
  }
  // Replace pwdCover with
  this.pwdCover = val.replace(/\S/g, '●');
  this.password = realArr.join('');
},

This is the end of this article about the sample code for Vue to implement the function of prohibiting browsers from remembering passwords. For more relevant content about Vue prohibiting browsers from remembering passwords, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

How to implement the password remembering function in front-end vue+elementUI
Simple implementation method of Vue+element+cookie remember password function
How to use cookies and crypto-js in vue to remember passwords and encrypt them
Use sessionStorage to remember password function in vue
Vue project implements the function of remembering password to cookie (with source code)

<<: A brief talk about MySQL semi-synchronous replication

>>: An enhanced screenshot and sharing tool for Linux: ScreenCloud