如何禁止浏览器自动填充
本文由 Deguang 发表于 码路-技术博客
浏览器的保存账户密码功能,给我们带来了很大的便利,但是在有些情况下,我们并不希望浏览器帮我们填充一些表单,然而autocomplete的一些参数项并不能阻止浏览器回填,这里我们来看下如何解决这个问题。
问题描述:
项目注册部分的表单有三项,分别为手机号
、验证码
和密码
,当完成注册操作后,浏览器提醒是否保存密码,用户名部分显示的是验证码,点击保存后,打开登录页面,手机号
和密码
项被分别填充为了验证码
和密码
,给用户带来了一定的不便。
解决过程:
1. 第一反应考虑到的是,给登录表单的<input>
标签,增加autocomplete="off"
MDN autocomplate 文档
"off"
- The browser is not permitted to automatically enter or select a value for this field. It is possible that the
document or application provides its own autocomplete feature, or that security concerns require that the
field's value not be automatically entered.
- Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
在autocomplete的文档中说明了value为off时,浏览器禁止给当前字段自动的输入或者选中一个值,但下方Note言明:在大多数现代浏览器中,off 值不能阻止浏览器的密码管理工具自动填充,所以第一次尝试失败;
2. 动态设置密码 input 标签 type
<input type="text" οnfοcus="this.type='password'"></input>
这样设置 可以保证用户在点击密码框之前,避免浏览器识别为登录表单、自动填充。
这里多说两句,浏览器是如何判断当前表单需要 autocomplete,浏览器自动保存表单是当前 form 存在 type 为 password 的input、且该 input 为表单中的第二个 input 输入框。
所以,这里给 password 设置初始 type 为 text,在用户 点击 input 聚焦后 设置 type 为 password ,避免浏览器在 页面 onload 之后判断登录表单进行回填。这样可以解决大部分场景下对于避免回填的需要。然而我们的业务需要 依据跳转链接中的 param 给用户填充 密码,这就导致了在用户 主动 focus 之前,密码会被明文展示,聚焦后又会隐藏,操作体验不佳;
3. page.onload 后 js 控制 input type
方法同上,问题点在于 页面load 后手动设置 input type 为 password,而后根据 page url 参数 填充表单。
但存在问题是 浏览器填充的时机无法控制,导致业务填充表单被自动填充覆盖;方案pass;
4. autocomplete 设置 其他参数
autocomplete
除了 on、off 之外,还有很多参数:name、email、username、new-password、current-password、street-address 等等;
当 input type 为 password 但 autocomplete 为 new-password
, 即可解决浏览器自动填充问题,浏览器将当前输入框识别为新密码,便不会自阿东填充值。(PS:有例子提到,设置 autocomplete 为一个 任意字符串 ,也能达到相同效果,大家可以试一下)
转载于:https://www.cnblogs.com/lalalagq/p/9897546.html
如何禁止浏览器自动填充相关推荐
- 禁止浏览器自动填充账号密码
登录页面常用,登录后浏览器自动填充账号密码,非常不安全,一般为了方便都设置记住密码功能. 解决方法: 方法一 设置autocomplete为off,适用于普通文本框 <input type=&q ...
- 禁止浏览器自动填充input解决方案
网上找了很多禁止浏览器自动推荐input值的办法,推荐的方法有几种: 1.设置input的autocomplete="off" 2.设置input的autocomplete=&qu ...
- 禁止浏览器自动填充密码,用户名的问题
最近在项目中遇到一个问题,系统管理员在页面添加普通用户时候,浏览器会在用户名和密码框自动填充当前登录用户名和密码,在网上搜索很多,找到几种办法,亲测第三,四种方法有效,建议使用第四种 方法一:设置au ...
- 禁止浏览器自动填充密码框密码
<INPUT id="passWord" class="ipt" type="password" οnfοcus="cha ...
- 禁止chrome浏览器自动填充表单的解决方案
禁止chrome浏览器自动填充表单的解决方案 参考文章: (1)禁止chrome浏览器自动填充表单的解决方案 (2)https://www.cnblogs.com/ld-swust/p/5801606 ...
- 360 html禁止自动填充,360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决?...
360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决? 很多用户都遇到了360浏览器自动填充表单的问题,那么怎么解决呢?今天带来360浏览器自动填充表单的问题解决方法分享. 开发 ...
- PC端浏览器自动填充账号密码输入框问题该如何解决?
项目场景: 个人中心界面有个子菜单--修改支付密码,可以进行支付密码设置和修改. 问题描述 修改支付密码页面有三个输入框,第1个是type="text"的文本类型输入框,最后2个是 ...
- 禁止 input 自动填充
禁止 input 自动填充 在编写 Form 表单样式的时候,修改自动填充后的 input 样式是很麻烦甚至不可行的,而且还有一些不需要自动填充的场景. 浏览器根据保存数据时表单控件的 type 和 ...
- layui 解决浏览器自动填充form表单账号和密码输入框的问题
layui 解决浏览器自动填充form表单账号和密码输入框的问题 参考文章: (1)layui 解决浏览器自动填充form表单账号和密码输入框的问题 (2)https://www.cnblogs.co ...
最新文章
- 宏基因组理论教程5宏基因组功能组成
- Java项目接口安全_ESAPI安全开发实战
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 篇
- 我国大陆居民身份证Java验证
- 中国环保塑料薄膜行业营销策略分析及投资规划建议报告2021-2027年版
- springboot Field userInfoInter in com.**.** required a bean of type ‘***.**‘
- ubuntu apt-get install xxx命令,下载的路径及清除方式
- 面向对象编程(基础简介)
- (原创)对某国的一次渗透
- 如何添加JWT生成的token在请求头中
- 博科查看光功率_法拉第旋光器:非互易性旋转光的偏振
- pytorch图像和张量的相互转换_Day107:Pytorch张量类型的构建与相互转换
- sap gui mac下载_SAP|叮咚,您有一份来自SAP的邀请,请签收
- 新的 CSS 攻击会导致 iOS 系统重启或 Mac 冻结
- 如何优雅的编写Objective-C语言?
- macbook边缘磕碰如何修复
- 抖音不会创作爆款视频?模仿他人爆款视频轻松上热门。
- Cocos2d-x 2.0.1 学习tests示例(一)Manual Transformation
- 老牌好用免费的数据恢复软件easyrecovery操作简单一键恢复
- 使用VMware通过vmdk文件创建XP虚拟机
热门文章
- 2022-2028年中国钢丸行业市场行情监测及未来前景规划报告
- 2022-2028年中国互联网+不良资产处置行业深度调研及投资前景预测报告
- 2022-2028年中国中密度纤维板市场投资分析及前景预测报告
- SpringBoot集成AOP管理日志
- python特性(八):生成器对象的send方法
- Camera系列规格参数
- CVPR2020:基于自适应采样的非局部神经网络鲁棒点云处理(PointASNL)
- YOLOV4知识点分析(二)
- 空间点像素索引(一)
- 2021年大数据Hive(一):​​​​​​​Hive基本概念