解决浏览器自动填充密码框的问题

本文介绍了一种简单且兼容所有浏览器的方法,用于阻止浏览器自动保存和填充网站密码,以减少用户体验上的不良影响。

使用Chrome、Firefox和360等浏览器,在某个网站进行提交表单的操作时,浏览器会提示是否保存密码


如果选择了保存密码,之后在浏览这个网站的任何一个有密码输入框的的页面时,浏览器会把上次保存过的账号和密码自动填入到表单中,输入框的背景变成高亮的颜色。


只是登录页面自动填充的话倒没有什么问题,但是网站任何一个地方的表单都会自动填充,这就会带来很多不必要的麻烦,比如注册页面;如果表单涉及到资金方面的数据提交,可能会给用户不安全的感觉。

 

    如果你是网站的开发人员,可能需要屏蔽浏览器的自动填充密码的功能来减少用户的不良体验。网上找到的方法大多数为js方法,要么太繁琐,要么在兼容性方面存在问题。

 

    下面的方法很简单,而且兼容任何浏览器,使用后大部分浏览器在提交表单时就不会提示你保存密码。( 某些浏览器无法阻止保存密码,但是可以阻止自动填充)。

 

    在页面的 第一个password元素 (有些页面会有多个password,如注册页面)之前加入一行代码:


<input type="password" style="display: none;">


原理是这样的:

    在提交表单的时候,浏览器会自动检测表单中是否有password元素 ,如果有就提示是否保存密码(不考虑网银、支付宝等输入密码时需要安装控件的网站);所以想要阻止浏览器保存密码,只要将传统的表单提交方式改为ajax异步提交即可。

 

    当允许浏览器保存该网站的密码之后,下次打开该网站的任何一个页面时,浏览器会自动检测该页面是否有password元素 ,如果有或者有多个,则自动填充对应的上次已保存的密码,但自动填充的前提条件是:页面中的第一个password元 必须要有id属性或name属性。如果两种属性都没有则不会自动填充。


好吧,其实是转载的


================================================================= EtSoftware 软件库: InternetExplorerCtl 项目概述 ================================================================= 软件介绍: 程序通过自动填充功能,填写网页表格完成自动提交,适用于群发博文,邮件等操作。 软件开发由EtSoftware工作室研发。用户可根据设定的配置文件。定时发送相关内容。 程序仅用于学习使用不得用于商业用途,违法规定后果自负。相关版本可以关注EtSoftware 官方网站与博客。如您有好的建议可以通过发送邮件至EtSoftWare@163.com或QQ466814195留言 提出软件修改建议。我们将虚心接受。感谢您对EtSoftware团队的支持! 适用人群: 1,推广人,每天需大量发送博文或留言人群 2,略懂编程人员,使用起来文件,可通过循环生成配置文件。 配置说明: [set] ;step总数 stepcount=10 ;记录步进位置 Idx=0 ;复制次数 times=1 ;以step+index格式书写 index为动作次序 0为起始点 [step0] ;操作命令 ;SETLOCAL 设置URL ;SETLOCALNOBUSY 设置URL 等待前一次加载完成 ;ONCLICK 单击事件 ;INNERTEXT 以innerText填充控件 ;INNERHTML 以innerHTML填充控件 ;SUBMIT 提交表单 cmd=SETLOCAL ;TagName默认为INPUT TagName= ;网页节点 属性标识 默认为NAME属性 AttName= ;网页节点 属性值 AttVal= ;值 支持自动转码如\r\n自动转换成换行回车符 Value=etsoftware.3322.org ;执行前停留时间单位为毫秒 Pretime=1000 软件名:EtSoftWare.InternetExplorerCtl 支持平台:WinXP,Win2000,Win2003,Win7,Win2008,Vista 软件类型:永久免费,绿色版,破解版 开发:半条虫(466814195) 发行:EtSoftWare 网址:EtSoftWare.3322.org 博客:EtSoftWare.blog.163.com 软件未经授权不得用于商业用途,违者必究。 更新日志: 2013-03-15 研发 3012-03-24 内测 ================================================================ 本压缩包不包涵源码,不便之处敬请原谅。
虽然给定的参考引用中未提及浏览器自动填充密码的逻辑原理,但一般而言,浏览器自动填充密码的逻辑原理如下: 当用户在网页的登录表单中输入用户名和密码并成功登录后,浏览器会询问用户是否要保存该密码。若用户选择保存浏览器会将该网站的网址、用户名和加密后的密码存储在本地数据库中。 当用户再次访问该网站,浏览器会识别出登录表单的输入框。通常通过HTML标签和属性来判断,比如 `<input type="password">` 标签代表密码输入框,`<input type="text">` 或 `<input type="email">` 可能代表用户名输入框浏览器会将当前网站的网址与本地数据库中存储的网址进行匹配。若匹配成功,浏览器会从数据库中提取对应的用户名和加密后的密码,对密码进行解密,然后自动填充到相应的输入框中。 在某些情况下,浏览器还会根据表单的结构和上下文信息来进一步确认是否进行填充。例如,如果表单有特定的ID或类名,且这些信息与之前保存的表单特征相符,浏览器会更有把握地执行填充操作。 ### 代码示例(简单示意逻辑) ```javascript // 模拟本地存储的密码数据 const passwordStorage = { "example.com": { username: "user123", encryptedPassword: "encrypted123" } }; // 模拟解密函数 function decryptPassword(encryptedPassword) { // 实际的解密逻辑会更复杂 return encryptedPassword.replace("encrypted", "decrypted"); } // 模拟检测到登录表单 function detectLoginForm() { const currentUrl = window.location.hostname; const usernameInput = document.querySelector('input[type="text"], input[type="email"]'); const passwordInput = document.querySelector('input[type="password"]'); if (passwordStorage[currentUrl] && usernameInput && passwordInput) { const { username, encryptedPassword } = passwordStorage[currentUrl]; const decryptedPassword = decryptPassword(encryptedPassword); usernameInput.value = username; passwordInput.value = decryptedPassword; } } // 页面加载完成后检测表单 window.addEventListener('load', detectLoginForm); ```
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值