web安全：防止浏览器记住或自动填写用户名和密码(表单)的最简单终极解决方案

背景

最近项目上有一个功能是忘记密码的，里面有手机号码，验证码，登录密码这几个选项，然后手机密码又不是登录账号，然后密码用的是el input 里面的type = “password”，导致了修改密码成功之后，验证码还有密码会被谷歌浏览器自动保存

在网上搜了一圈，发现都是不完美的，不兼容全部的浏览器，于是只能自己摸索了，

解决方案

1

• 密码输入位置默认为input=“text”。
• 在输入框上添加 οnfοcus=“this.type=‘password’” 输入框获得焦点时改变输入框格式为密码框
• 输入密码
• 在提交前清空输入框密码，并修改密码框为文本框。（我的提交为发生Ajax提交，可根据自己实际情况进行调整，或者情况密码之后，将值保存在一个隐藏域中，再提交表单）

2

<input type="password" name="txtPassword" style="display:none">

<input type="password" name="txtPassword" placeholder="请输入密码" autocomplete="off" />

谷歌浏览器比较吊，只加上一个隐藏密码框还是不行的，把两个密码框名字改成一样的就好了，这家伙就找不到了

3 简单粗暴

既然type = ‘password’会记住密码，那我们就设置为text就好了

<el-input
	id="password"
	v-model="form.loginpassword"
	placeholder="请输入登录密码"
	type="text"
	maxlength="20"
></el-input>
<i class="eye el-icon-view" @click="show"></i>

show() {
	this.isShow= !this.isShow;
	this.setPwdTypetext('password', this.isShow, this.form.loginpassword);
},
setPwdTypetext(id, show, val) {
	let len = val ? val.length : 0;
	if (len && show) {
		document.getElementById(id).setAttribute('type', 'text');
	} else {
		document.getElementById(id).setAttribute('type', 'password');
	}
},

	watch: {
		'form.loginpassword'(val) {
			this.setPwdTypetext('password',this.isShow, val);
		},
		
	},

禁止自动填写

如果autocomplete=“off” 如果无效的话，那么可以用autocomplete=“new-password”