关于chrome记住密码的规则

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于chrome记住密码的规则相关的知识,希望对你有一定的参考价值。

最近在做项目表单部分,发现选择chrome记住密码后,不但点击记住密码的页面表单,整个项目的表单都被影响,后多次反复试用,发现了几条规律,在此记录并给大家看看,如果有问题或者有需要补充的,请留言,我随时改。3q

规则一

记住的密码,不清缓存,就不会消失,即便改变了 主表单--被记住的表单 的属性,此域名下的其他表单依然会显示--多发生在开发阶段,发现修改了属性,记住的密码和用户名依然显示。

规则二

先name,后id,有name就按name显示,否则按照id显示,显示的时候(包括自己以及其他同类型input)也按照这个规则,尤其是其他同name 或同id 甚至既同name又同id的input先取相同name 的记住值,后取相同id 的记住值

如被记住的input为
<input type="text" name="user1" id="user1" >
<input type="text" name="user2" id="user2" >

现其他页面有input如下:
<input type="text" name="user1" id="user2" > //显示的是上面第一个,既name 为 user1, id 为user1 的input记住值
<input type="text" name="user2" id="user1" > //显示的是上面第二个,既name 为 user2, id 为user2 的input记住值

规则三

关于type=password 的input,当chrome发现跳转的下一个页面有type=password的时候,是不会弹出 记住密码 弹窗的,所以这里的跳转地址很重要,跳转的下个页面有password 的input的话,chrome不会弹窗,跳转的下个页面没有的话,就会弹出 --- 此种情况只有在form表单提交,且action中填写的只是静态html,并没有请求接口的时候会这样。另外password 的输入框内容是共享的,共享管理密码中被记住的当前站点下的密码。不受name与id的影响

规则四

type=password 的 DOM 上面最近的input(type为 text或者email居多,如果上面是隐藏域,即便隐藏域中有默认值,也会依次往上查找)默认被chrome认为是password 的user名被保存下来,在 chrome 设置中的 管理密码 弹窗上可以一目了然的看清楚,记住密码的原理是按照 域名 + user + password 的形式记住的

规则五

即便主表单是被记住的,如果主表单没有name 或id,后期依然不能显示,然而被记住的密码在其他同站点下表单同类型的input会显示
如 主表单 index.html 即便只有user 没有name 和id ,password框有name,也会如此
<input type="text" placeholder="user"> //记住后不显示
<input type="Password" name="psd" placeholder="Password"> //记住后不显示

附表单 password.html
<input type="password" name="passworpooo" id="r" class="form-control" placeholder="456446">//记住后显示

规则六

开发过程中会遇到的坑,是记住密码后。再改代码,依然发现记住的密码显示,于是以为修改的代码是有效或无效的,其实记住的是之前的,所以每次修改代码,需要清空所有缓存及记住的密码,比如 主表单 中 user的input 的类型email, name 为 user,输入内容提交表单记住密码后,再删掉name或者修改name,使其不为user,当加载到 email 的input 并且 name=user 的时候,双击,依然显示之前记住的内容

规则七

类型不相同的表单域,只要name 或者id 与之相同,依然会显示
如:主表单 index.html
<input type="email" name="user" placeholder="Email">
<input type="text" name="user1231" placeholder="user">
<input type="Password" name="psw1231" placeholder="Password">

附表单 email.html
<input type="text" name="user"> //显示
<input type="email" name="user" id="Email2">//显示
<input type="email" id="user">//显示
当主表单被记住后, email.html 中第一个input双击后,依然显示了主表单记住的内容
因为 email类型的输入框是h5中新加入成员,强烈怀疑,本质其实是text,只不过为了开发方便,区分开来的,在做邮箱类型验证的时候能派上用场,此处待查

规则八

记住密码与其他输入域不同,没有弹窗选择记住密码,输入域依然会记住曾经输入的内容,而记住密码不同,是不会显示的

规则九--摘抄网上一段处理方式

如何禁用Chrome谷歌浏览器自动保存密码的提示?
在网页开发中,在表单中加入autocomplete="off"后,IE和FF不会提示保存密码,但是用Chrome浏览器登录系统时,会弹出自动保存密码的提示,从安全的角度考虑,需要禁止浏览器的这个功能,提升系统安全性。
大部分浏览器都是根据表单域的type="password"来判断密码域的,所以针对这种情况可以采取“动态设置密码域”的方法:
复制代码 代码如下:
<input type="text" name="password" onfocus="this.type=‘password‘" autocomplete="off"/>
解释:当这个文档框获取焦点时才将其变成密码域。
实测该方法简单有效,可以禁用Chrome浏览器提示保存密码的提示框。
注意,onfocus="this.type=‘password‘"不能再IE上识别,需要做兼容性考虑,在网页初始化的时候处理下就好了,对于IE浏览器,在input标签上使用用type="password" autocomplete="off"后,浏览器是不会提示记住密码的。

将autocomplete="off"属性放入表单form中时,firefox 依然显示弹窗询问是否记住密码,然而即便记住了,依然在表单中不显示,否则记住的信息会默认填充在表单中,即便刷新仍然无效
而chrome的处理方式 为只限制其他输入域的内容不显示,记住密码弹窗正常弹出,记住密码的两个关键输入域---被chrome记住的user和password,也依然会默认显示在输入框中

但很显然 <input type="text" name="password" onfocus="this.type=‘password‘" autocomplete="off"/>这句话是有效的,因为当前表单中没有type=password 的输入框,chrome是不会弹窗显示提醒记住密码的

疑问:自己新建的demo中,除非使用input type=submit 或 button 或使用 $("form").submit() 总之,一定要表单提交,才会弹出弹窗提示记住密码,使用
<a href="javascript:;" class="button">submit</a> 伪提交,完成ajax传输数据后跳转页面,是不会弹窗提示记住密码的,然而公司的项目也是使用了a标签,好奇怪,后天回公司看下

答案:不管是form表单提交还是ajax(不管是否登录成功),都会弹出 记住密码

以上是关于关于chrome记住密码的规则的主要内容,如果未能解决你的问题,请参考以下文章

记住密码在 ff 中有效,但在 ie 和 chrome 中无效

禁止chrome记住密码

vue项目实现记住密码功能

CSS怎样修改chrome记住密码后自动填充表单的黄色背景?

阻止浏览器记住密码功能

React中禁止chrome填充密码表单