禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)

目录

  • 1.要解决的问题
  • 2.一技能:原生属性,小试牛刀
  • 3.二技能:傀儡input,瞒天过海
  • 4.三技能:JavaScript出击,直接开大
  • 5.九九八十一难,永远还有最后一难

写在前面: 如有转载,务必注明出处,否则后果自负。

1.要解决的问题

最近工作上遇到一个客户反馈的问题,说是网页上的登录界面会出现自动填充账号和密码,这会导致系统不安全,账号泄露等风险。我寻思着ntm要是没有在浏览器上点击自动保存账号和密码它会自动填充吗?真是无语。本以为不需要修改,让他自己在浏览器上清除保存密码的记录即可,没办法,打工人作为牛马有求必应。

所以,我们要解决的就是,把浏览器对input的自动填充以及填充提示给Ban掉。如下图的三个区域。
由于不同的浏览器对于自动填充有着不同的策略,所以我们需要使出各种招式组合在一起才能把它消灭,在这里我主要使用谷歌、火狐、Edge(原IE)三大浏览器来对比查看效果,一起来看看吧!
在这里插入图片描述
简单写了一个Demo,来模拟表单登录:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input禁止自动填充</title><link rel="stylesheet" href="./index.css">
</head><body><form action="/"><input id="userName" type="text" placeholder="请输入账号" ><input id="userPwd" type="password" placeholder="请输入密码" ><button type="submit">提交</button></form>
</body></html>
/* index.css */
* {margin: 0;padding: 0;box-sizing: border-box;
}form {width: 300px;height: 200px;margin: 100px auto;
}input {width: 100%;height: 40px;padding: 0 10px;margin-bottom: 20px;border: 1px solid #ccc;border-radius: 5px;outline: none;
}button {width: 100%;height: 40px;border: 1px solid #ccc;border-radius: 5px;background-color: aquamarine;
}

在这里插入图片描述

2.一技能:原生属性,小试牛刀

给input 添加原生属性autocomplete
对于text框,添加 autocomplete=“off”
对于password框,添加 autocomplete=“new-password”

<input id="userName" type="text" placeholder="请输入账号" autocomplete="off">
<input id="userPwd" type="password" placeholder="请输入密码" autocomplete="new-password">

谷歌浏览器:仅对 type=text’ 的input有效,即不能自动填充,也不会显示填充提示;而对于密码框 type=password’,虽然不会自动填充,但密码框聚焦后会出现填充提示,点击填充提示的账号密码,可以实现自动填充。如图所示:
在这里插入图片描述
火狐浏览器:输入框和密码框都不会出现自动填充,但二者聚焦后都会出现填充提示,并都能进行点击后填充。如图所示:
在这里插入图片描述
Edge浏览器: autocomplete对该浏览器完全无效。初始化页面即会自动填充账号和密码。
在这里插入图片描述

3.二技能:傀儡input,瞒天过海

给text框和password框前后各加一个假的input框,让浏览器的自动填充对假的input框生效,然后用css把假的input框设置为不可见,从而瞒天过海。

<form action="/"><input id="fakerUserName1" type="text" placeholder="请输入账号" autocomplete="off"><input id="userName" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserName2" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserPwd1" type="password" placeholder="请输入密码" autocomplete="new-password"><input id="userPwd" type="password" placeholder="请输入密码" autocomplete="new-password"><input id="fakerUserPwd2" type="password" placeholder="请输入密码" autocomplete="new-password"><button type="submit">提交</button>
</form>
/* css将假的input设置为不可见 */
input#fakerUserName1,
input#fakerUserName2,
input#fakerUserPwd1,
input#fakerUserPwd2 {position: fixed;top: -100%;left: -100%;
}

谷歌浏览器: 该技能对谷歌的效果与属性autocomplete的效果一样,故与技能一相比无任何变化。即text框既不能填充也无填充提示,password框不能填充但聚焦后有填充提示,并且点击后可自动填充。

火狐浏览器: 该技能对text框有效,既不能自动填充,也不会出现填充提示,对password无效,不能自动填充,但聚焦后有填充提示,点击后可自动填充。如图:
在这里插入图片描述
Edge浏览器: 解决了初始化页面即自动填充的问题,对于text框既不能自动填充,也不会出现填充提示,对于password框,不能自动填充,但聚焦后有填充提示,点击后可自动填充。如图:
在这里插入图片描述

注意: 添加假的input框时要注意给input的id也要加上,否则可能不起作用,因为不同的浏览器对此有不同的策略,有时,id的字符长短也会产生不同的效果,可自行尝试。

4.三技能:JavaScript出击,直接开大

通过前两个技能,可以发现,这些浏览器的策略是非常激进的,尤其是对于password框。有时无论你添加多少个假的input框,可能对于浏览器而言,它并不在乎,因为只要是 type=‘password’ 的input框,它就会在聚焦后出现填充提示,点击这个填充提示,就又可以实现自动填充。对于某些用户而言,可能由于不小心点击了在浏览器上自动的保存密码,但对于该功能,其账号的安全性便大大降低了,尤其对于某些注重隐私的公司而言,这可能是不可接受的,因为,商战是处处皆有可能的,于是乎,一口大黑锅就甩到了开发人员的身上。

既然如此,开发狗该怎么办呢?
既然技能一和技能二只对 type=‘text’ 的input框有效,那我就不要使用 type=‘password’ 了呗。

嗯!真是大聪明?!
如果这样的话,输入密码的时候不就直接明文输入了吗?
对啊…
滚…
等等,你说什么?
滚…
上一句,输入密码的时候?输入密码的时候??输入密码 的时候 !!!
OK,JavaScript出击!

于是乎,办法出现了,我们可以将 type=‘password’ 改为 type=‘text’ ,然后使用JavaScript监听input事件,实现偷梁换柱,功德圆满!哈哈哈哈哈…

<body><form action="/"><input id="fakerUserName1" type="text" placeholder="请输入账号" autocomplete="off"><input id="userName" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserName2" type="text" placeholder="请输入账号" autocomplete="off"><input id="fakerUserPwd1" type="text" placeholder="请输入密码" autocomplete="new-password"><input id="userPwd" type="text" placeholder="请输入密码" autocomplete="new-password"><input id="fakerUserPwd2" type="text" placeholder="请输入密码" autocomplete="new-password"><button type="submit">提交</button></form><script>document.querySelector('#userPwd').addEventListener('input', function () {this.type = 'password';})</script>
</body>

看看效果:

谷歌:
谷歌浏览器效果
火狐:
火狐浏览器效果
Edge:
Edge浏览器效果

5.九九八十一难,永远还有最后一难

根据网友反馈,当输入密码然后清空之后会出现自动填充的提示,我试了下,确实如此。而且谷歌和Edge出现这种情况之后还会影响type='text’的输入框也出现自动填充。

只能说浏览器对于自动填充的策略确实很激进啊,但凡出现password,它似乎就对这个input进行了跟踪,无论type再怎么变,它也会给你弹出自动填充。

这里的解决办法是使用账号脱敏的思想,坚决不使用password密码框,关于账号脱敏可以看看我的下一篇文章,文章地址在本文末尾。

具体思路就是使用text框输入密码,输入时用•代替明文显示,然后用一个辅助input记录真实密码,传递数据时就使用这个辅助input的值进行传递。

具体代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 300px;padding: 50px 20px;margin: 100px auto;border-radius: 5px;background: #ccc;}input {width: 100%;height: 40px;padding: 0 10px;margin-bottom: 20px;outline: none;border: 1px solid #ccc;}input#realUserPwd {display: none;}button {width: 100%;height: 40px;cursor: pointer;outline: none;border: 1px solid #ccc;background-color: #fff;}</style>
</head><body><form class="container" action="/"><input type="text" id="userName" placeholder="请输入账号" autocomplete="off"><input type="text" id="userPwd" placeholder="请输入密码" autocomplete="off"><input type="text" id="realUserPwd" autocomplete="off"><button type="submit">提交</button></form><script>const inputField = document.querySelector('#userPwd');const realUserPwd = document.querySelector('#realUserPwd');inputField.addEventListener('input', function (e) {// 获取输入框中的值const inputValue = this.value.trim();// 拼接每一次输入的当前数字realUserPwd.value += inputValue.substring(inputValue.length - 1);// 防止用户删除上一个输入值时出现错误// 并且// 防止用户通过粘贴输入值时只监听到最后一位数而出现的错误if (inputValue.length != realUserPwd.value.length) {realUserPwd.value = inputValue;}// 将明文替换成•显示this.value = inputValue.substring(0, inputValue.length).replace(/./g, '•');console.log('res', this.value, this.value.length, realUserPwd.value, realUserPwd.value.length);})</script>
</body></html>

看看效果:
谷歌浏览器:
在这里插入图片描述
火狐浏览器:
在这里插入图片描述
Edge浏览器:
在这里插入图片描述
看起来已经解决了这个bug,并且代码也精简了很多,如果还有其他问题,欢迎交流!

后记:
对于浏览器版本的不同可能有些许差异,但问题不大。对于我使用的浏览器的版本,见下图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

SOS: 但与客户的战争还未结束,还是与input有关,也就是输入账号脱敏的问题,也就是实现下图的效果,切莫大意,我刚开始确实低估了它,不过最终也是如愿解决。

在这里插入图片描述

欲知后事如何,且听下回分解。

对input输入框脱敏的实现(input输入时可回删、可粘贴)可查看文章:https://blog.csdn.net/qq_51667621/article/details/139988001

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36393.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript小记_js的数据类型与判定

一、数据类型&#xff08;8种&#xff09; 基本数据类型&#xff1a;number string Boolean undefined null symbol bigint引用数据类型&#xff1a;object &#xff08;array function &#xff09; 二、区分数据类型 1、typeof 通常用来判断基本数据类型&#xff0c;它返…

ElasticSearch 和 MySQL的区别

MySQLElasticSearch 数据库&#xff08;database&#xff09;索引&#xff08;index&#xff09;数据表&#xff08;table&#xff09; 类型&#xff08;type&#xff09; 记录文档&#xff08;document&#xff0c;json格式&#xff09; 一、ES基础命令 1. ES cat查询命令 2.…

【proteus经典实战】显示温度和电压测量值在一个LCD屏幕上

一、简介 为基于微控制器的系统设计的&#xff0c;旨在实现温度和电压的实时测量并将结果显示在LCD屏幕上。核心部件包括DS1621数字温度传感器和MAX1241 A/D转换器&#xff1a;DS1621用于温度测量&#xff0c;而MAX1241则负责电压测量。通过精确读取这些传感器的数据&#xff0…

如何用一个二维码实现企业固定资产管理?

固定资产管理中普遍存在盘点难、家底不清、账实不一致、权责不清晰等问题。如果平时不规范化执行&#xff0c;年终面对上上下下、大大小小、成百上千件物资要进行盘点整理的时候&#xff0c;会是十分痛苦且低效的事情。 今天这篇文章就来给大家推荐几家便宜好用的二维码固定资…

动态人物抠图换背景 MediaPipe

pip下载 MediaPipe pip install mediapipe -i 手部特征点模型包包含一个手掌检测模型和一个手部特征点检测模型。手掌检测模型在输入图片中定位手部&#xff0c;手部特征点检测模型可识别手掌检测模型定义的被剪裁手掌图片上的特定手部特征点。 由于运行手掌检测模型非常耗时&…

商务英语培训柯桥外语学校生活口语“Rose”是玫瑰,那“Under the rose”是“玫瑰之下”?

最近&#xff0c;《玫瑰的故事》很火&#xff0c;女主角在剧中也经常收到黄色的玫瑰花。玫瑰花常常与爱情、美丽和浪漫相关&#xff0c;今天一起跟着英语君学习玫瑰花的俚语吧。 Under the rose 意思&#xff1a;私下地、秘密地或隐秘地。来自拉丁语短语sub-rosa&#xff0c;它…

k8s架构设计思想

1.谷歌borg云计算管理平台 一类&#xff1a;infrastucture platform software 另一类&#xff1a;borg为主的非虚拟化技术&#xff0c;调度进程 核心是轻量级作业调度&#xff0c;不是做虚拟化/云平台的 borg本身用了一些容器技术 生产业务product workload要求高可用&#xf…

Maven - 在没有网络的情况下强制使用本地jar包

文章目录 问题解决思路解决办法删除 _remote.repositories 文件代码手动操作步骤验证 问题 非互联网环境&#xff0c;无法从中央仓库or镜像里拉取jar包。 服务器上搭建了一套Nexus私服。 Nexus私服故障&#xff0c;无法连接。 工程里新增了一个Jar的依赖&#xff0c; 本地仓…

CesiumJS【Basic】- #024 加载webm文件(Primitive方式)

文章目录 加载webm文件(Primitive方式)1 目标2 代码2.1 main.ts3 资源文件4 其他加载webm文件(Primitive方式) 1 目标 使用Primitive方式加载webm文件 2 代码 2.1 main.ts /** @Author: alan.lau* @Date: 2024-06-16 11:15:48* @LastEditTime: 2024-06-16 11:43:02* @…

【linux/shell案例实战】Linux/shell教程实战技巧案例汇总

一.shell相关技巧 提取数据常用的各种小技巧 shell提取文件中指定两个关键字之间的内容 忽略函数中某一步执行过程 shell中按行和按列追加文件内容 shell使用echo输出空行与空格 使用bc命令实现小数数值计算 二.awk相关技巧 awk中FS和OFS的常规使用 awk替换文本字段&a…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于改进目标级联分析法的交直流混联系统发电-备用分布式协同调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

Docker Compose 一键快速部署 RocketMQ

Apache RocketMQ是一个开源的分布式消息中间件系统&#xff0c;最初由阿里巴巴开发并贡献给Apache软件基金会。RocketMQ提供了高性能、高可靠性、高扩展性和低延迟的消息传递服务&#xff0c;适用于构建大规模分布式系统中的消息通信和数据同步。 RocketMQ支持多种消息模型&am…

快速排序(C/C++实现)—— 简单易懂系列

前言 排序作用的重要性是不言而喻的&#xff0c;例如成绩的排名、预约时间的先后顺序、不同路程的消耗与利润等。快排可以实现O(n * logn)的时间复杂度&#xff0c;O(logn)的空间复杂度来实现排序【虽然结果是不稳定的】。 算法思想 快速排序实际上是采用分治的思想&#xf…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【15】异步_线程池

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【15】异步_线程池 初始化线程的 4 种方式开发中为什么使用线程池线程池七大参数线程池工作原理常见的 4 种线程池生产中如何使用线程池&#xff1f;CompletableFuture 异步编排—简介业务…

贰[2],WPF+HandyControl开发异常记录

开发环境 VS2022 WPF/.net6.0 HandyControl 1&#xff0c;异常1&#xff1a;Exe程序在锁屏后&#xff0c;再次进入&#xff0c;exe程序停止界面更新 经过一段地毯式搜索&#xff0c;发现是HandyControl:TabControl的样式导致&#xff0c;TabControlPlusBaseStyle&#xff0…

论软件系统架构风格

论软件系统架构风格 一、引言 在软件工程的广阔领域中&#xff0c;软件系统架构风格如同一座指引开发者在复杂系统中前行的灯塔。它不仅决定了软件系统的基本结构&#xff0c;还直接影响着系统的质量、可维护性和可扩展性。因此&#xff0c;对软件系统架构风格的研究和探索&a…

selenium4如何指定chrome和firefox的驱动(driver)路径

pythonpytestselenium框架的自动化测试脚本。 原本用的chrome&#xff0c;很久没用了&#xff0c;今天执行&#xff0c;发现chrome偷偷升级&#xff0c;我的chromedriver版本不对了。。。鉴于访问chrome相关网站太艰难&#xff0c;决定弃用chrome&#xff0c;改用firefox。因为…

2.SQL注入-字符型

SQL注入-字符型(get) 输入kobe查询出现id和邮箱 猜测语句,字符在数据库中需要用到单引号或者双引号 select 字段1,字段2 from 表名 where usernamekobe;在数据库中查询对应的kobe&#xff0c;根据上图对应上。 select id,email from member where usernamekobe;编写payload语…

JAVA期末速成库(10)第十一章

一、习题介绍 Check Point&#xff1a;P416 11.1&#xff0c;11.6&#xff0c;11.7&#xff0c;11.8&#xff0c;11.12&#xff0c;11.17&#xff0c;11.24 Programming Exercise&#xff1a;11.1 二、习题及答案 Check Point&#xff1a; 11.1 True or false? A subcl…

力扣爆刷第156天之TOP100五连刷46-50(字符串转整数、括号生成、两数相加)

力扣爆刷第156天之TOP100五连刷46-50&#xff08;字符串转整数、括号生成、两数相加&#xff09; 文章目录 力扣爆刷第156天之TOP100五连刷46-50&#xff08;字符串转整数、括号生成、两数相加&#xff09;一、8. 字符串转换整数 (atoi)二、22. 括号生成三、70. 爬楼梯四、2. 两…