火狐浏览器自动记录密码的过程和自动填充加密后密码问题的解决

       浏览器一般都具有自动记录密码功能,但是这往往也会给我们带来一些的开发上的困扰,比如我这次遇到的火狐浏览器,首先抛出问题:

前端加密一般是:对密码框内的密码进行加密,然后又把加密后的值塞回密码框中,并通过form表单提交到后端进行解密,验证登录。

如果是火狐浏览器,它会监控post动作,询问是否记录账号密码,以便下次登录自动填充,但这时火狐浏览器保存的却是加密后的密码,导致下次打开登录页面自动填充了加密后的密码,再次点击登录密码会二次加密,从而登录失败!!!

经过验证,Chrome会很机智的记住加密前的密码,没有这个问题,怎么解决火狐出现的这种情况,首先先看看火狐的自动记住密码和自动填充的过程:

1.火狐浏览器自动记住密码是在监控到post登录请求后,从上往下,找到最后一个type=‘password’的input框,然后询问你是否记住该密码;

2.火狐浏览器自动填充是从上而下,寻找第一个为type=‘password’的input框,并把值填充进去,不管这个input是否是隐藏(display:none)的。

结合以上分析过程,我们就能解决自动填充的问题:

1.把原来的密码框A设置成隐藏域类型,即type=‘hidden’,隐藏起来,前端看不见,其余id,name属性不变;

2.在原来的密码框A下面增加一个密码框B:,PS:此处不要设置name属性,form表单就不会提交;

3.在前端登录按钮的click()方法中执行如下逻辑:

(1).获取B的值value,js加密后得到encryptedValue,并把encryptedValue赋值给A,然后submmit(此时,表单把A的值提交到后端);

(2).执行submmit后,将encryptedValue再赋值给B,这样前端密码框就会有密码变长的加密效果,而且加密后的密码是在post过后赋值的,火狐浏览器记住的是post时B的未加密密码;

这样,我们就能保证,

1.post提交的密码是加密的,不会有被抓包解析出来的危险;

2.火狐也会自动记录正确未加密的密码;

3.密码自动填充,也会准确找到显示B密码框,不会填充到A中,导致每次还要手动选择密码;

 

 

 

你可能感兴趣的:(前端,js,浏览器,登录,密码,加密,火狐)