当前位置: 首页 > Web前端 > vue.js

浏览器记忆密码功能引起的问题

时间:2023-03-31 21:19:27 vue.js

1.问题浏览器自动记忆密码是不安全的,因为它是明文记忆密码。那么如何防止浏览器记住密码呢?最简单的方法是打开浏览器的设置界面,关闭记住密码功能。然而,问题并没有那么简单。无法控制用户的行为。作为开发者,需要通过编码来约束用户的行为,避免用户“踩坑”。以下是我们要解决的问题:防止浏览器自动填写密码,解决浏览器兼容性问题,从源头上防止浏览器记住密码。2.防止浏览器自动填写密码。输入密码时,浏览器将自动填充用户名和密码。网上有很多方法,但大多不能解决所有问题。以下是我尝试过的方法:解决方案一:在input上使用autocomplete="off"autocomplete属性来指定输入字段是否应该启用自动完成。但有时它会不起作用,例如页面显示时可能会启用自动完成功能,导致页面显示出现问题。查阅资料,将属性值改为:new-password,即autocomplete="new-password",部分浏览器生效,但部分浏览器仍可写入密码。方案二:在用户名前面放一个隐藏的输入框和一个隐藏的密码框。这种方法对IE有效。方案三:设置type="text"onfocus="this.type='password'"。这个方法基本上可以防止浏览器在第一次进入页面时填写密码,不过我用火狐浏览器试了一下。输入数据后删除空数据,会出现填写密码的下拉提示。方案四:把两个属性相同的输入框,一个type='text',一个type='passward',绑定同一个变量,当变量为空时,显示type='text'的输入框和触发focus事件,将光标聚焦在显示的输入框上,隐藏另一个;当它不为空时则相反。经测试,ie浏览器有问题。当变量由空变为值时,触发焦点后,光标位于输入框的前面,而不是后面。{}"@keyup.enter.native="handleEnter"/>{}"@keyup.enter.native="handleEnter"/>计算:{类型(){if(this.loginForm.password){return'password'}else{return'text'}}},watch:{type(val,old){if(val==='password'){this.$nextTick(()=>{this.$refs.password2.focus()})}else{这个。$nextTick(()=>{this.$refs.password1.focus()})}}},3.解决浏览器兼容性问题经过尝试发现没有一种方法可以适配所有浏览器,于是以上解决方案综合起来,方案2,方案4都加上了,然后专门定制了一些有问题的浏览器下面的方法可以识别是什么浏览器//getbrowserexportfunctiongetExplorer(){varexplorer=window.navigator.userAgentvarcompare=function(s){return(explorer.indexOf(s)>=0)}varie11=(function(){return('ActiveXObject'inwindow)})()if(compare('MSIE')||ie11){return'ie'}elseif(compare('Firefox')&&!ie11){return'Firefox'}elseif(compare('Chrome')&&!ie11){if(explorer.indexOf('Edge')>-1){return'Edge'}else{return'Chrome'}}elseif(比较('Opera')&&!ie11){return'Opera'}elseif(compare('Safari')&&!ie11){return'Safari'}return''}if(getExplorer=='ie'){alert('当前浏览器内核为IE内核,请使用非IE内核浏览器!')}if(getExplorer=='Edge'){alert('当前浏览器为Edge,请使用非IE内核浏览器!')}例如:让方案4的代码在浏览器为ie和Edge时不执行,则不会出现输入框异常的问题。第二种解决方案适用于这两种浏览器。计算:{type(){if(this.explorer==='ie'||this.explorer==='Edge'){return'password'}if(this.loginForm.password){return'password'}else{return'text'}}},4.防止浏览器记住密码解决密码自动填充的问题,但是浏览器仍然可以记住输入的密码给浏览器,仍然不安全。因此,需要防止密码被浏览器记录,从源头上切断风险。经过询问,并参考了朋友和商家的做法。由于大部分浏览器在跳转页面时都会记录账号密码,因此请阅读表单中的信息。所以最后的解决办法:在成功登录跳转前清除表单账号密码。//登录成功后this.loginForm.username=''this.loginForm.password=''this.$router.push({path:'/'})