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

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

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

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

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

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

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

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

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

2.在原来的密码框A下面增加一个密码框B：<input type='password' id='passwordTemp' >,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中,导致每次还要手动选择密码;