当前位置： 首页 > news >正文

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

news 2025/6/21 10:14:02

目录

  • 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

相关文章：

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

目录 1.要解决的问题2.一技能&#xff1a;原生属性&#xff0c;小试牛刀3.二技能&#xff1a;傀儡input&#xff0c;瞒天过海4.三技能&#xff1a;JavaScript出击&#xff0c;直接开大5.九九八十一难&#xff0c;永远还有最后一难 写在前面&#xff1a; 如有转载&#xff0c;务…...

编程日记 2024/6/30 8:50:04

鸿蒙项目实战-月木学途：1.编写首页,包括搜索栏、轮播图、宫格

效果展示 搜索栏制作 相关知识回顾 输入框组件TextInput 单行输入框类型.type(InputType.Normal)//基本输入框.type(InputType.Password)//密码.type(InputType.Email)//邮箱.type(InputType.Number)//数字.type(InputType.PhoneNumber)//电话号.type(InputType.Normal).type…...

编程日记 2024/6/30 8:49:03

深入浅出：npm常用命令详解和实践

npm 是 Node.js 的包管理器&#xff0c;用于管理 Node.js 应用的依赖关系和版本。 以下是一些常用的 npm 命令&#xff1a; npm init: 命令用于初始化一个新的 Node.js 项目。它会创建一个 package.json 文件&#xff0c;这个文件包含了项目的元数据和依赖信息。 npm initnpm…...

编程日记 2024/6/30 8:48:02

山东大学-科技文献阅读与翻译（期末复习）（选择题+翻译）

目录 选择题 Chapter1 1.which of the following is not categorized as scientific literature 2.Which of the followings is defined as tertiary(三级文献) literature? 3.Which type of the following international conferences is listed as Number one conference…...

编程日记 2024/6/30 8:47:01

二分查找：自定义 upper_bound、lower_bound

二分查找详细介绍可以看这篇文章&#xff0c;此篇文章介绍返回索引的 upper_bound 和 lower_bound 的 C 实现。 lower_bound 实现代码 #include <vector>int lower_bound_index(const std::vector<int>& vec, const int& target) {int left 0;int right…...

编程日记 2024/6/30 8:43:58

Java 搭建个人博客基本框架

为了实现一个功能完善的个人博客系统&#xff0c;我们将使用Spring Boot作为框架&#xff0c;MySQL作为数据库&#xff0c;并引入Spring Security来处理用户认证和授权。以下是系统的详细设计和实现步骤&#xff1a; ## 项目结构 - src/main/java/com/blog - controller …...

编程日记 2024/6/30 8:41:56

停车场智能化管理：车位引导系统实现车位资源优化与数据分析

随着城市汽车保有量的不断增长&#xff0c;停车难问题日益凸显。尤其是在高峰时段&#xff0c;寻找停车位和取车成为了许多车主的头疼问题。为了解决这一难题&#xff0c;维小帮智能车位引导系统应运而生&#xff0c;它利用先进的技术手段&#xff0c;帮助车主快速找到停车位&a…...

编程日记 2024/6/30 8:40:55

梯度下降法

梯度下降法是一种在机器学习和深度学习中广泛使用的优化算法。它用于最小化某个函数&#xff0c;通常是损失函数或成本函数&#xff0c;通过迭代调整参数来找到函数的最小值点。梯度下降法的基本思想是从一个初始参数出发&#xff0c;沿着损失函数梯度&#xff08;导数&#xf…...

编程日记 2024/6/30 8:39:54

【高考志愿】光学工程

目录 一、专业概述 二、专业特点 三、研究和就业方向 3.1 研究方向 3.2 就业方向 四、光学工程专业排名 高考志愿选择光学工程专业无疑是一项既具深度又富挑战性的明智之举。这个古老而充满魅力的专业&#xff0c;正逐渐崭露其在现代社会中的重要性与独特魅力。 一、专业…...

编程日记 2024/6/30 8:38:53

Golang | Leetcode Golang题解之第205题同构字符串

题目&#xff1a; 题解&#xff1a; func isIsomorphic(s, t string) bool {s2t : map[byte]byte{}t2s : map[byte]byte{}for i : range s {x, y : s[i], t[i]if s2t[x] > 0 && s2t[x] ! y || t2s[y] > 0 && t2s[y] ! x {return false}s2t[x] yt2s[y] …...

编程日记 2024/6/30 8:35:50

【Unity】RPG2D龙城纷争（五）关卡编辑器之地图编辑

更新日期：2024年6月25日。 项目源码：本章发布 索引 简介关卡编辑器窗口类（LevelEditor）一、定义关卡编辑器窗口类二、两种编辑模式三、地块编辑模式1.关卡模板2.打开编辑窗口3.编辑器基本属性4.地块模板5.重新生成地图6.地图刷子7.刷地块源码链接简介 关卡编辑器将是我们配…...

编程日记 2024/6/30 8:34:49

音视频入门基础：H.264专题（4）——NALU Header：forbidden_zero_bit、nal_ref_idc、nal_unit_type简介

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…...

编程日记 2024/6/30 8:33:48

基于深度学习的人脸关键点检测

1. 任务和目标 人脸关键点检测的主要任务是识别并定位人脸图像中的特定关键点&#xff0c;例如眼睛的角点、眉毛的顶点、鼻子的底端、嘴角等。这些关键点不仅能提供面部结构的几何信息&#xff0c;还可以用于分析表情、识别个体&#xff0c;甚至检测面部姿势。 2. 技术和方法…...

编程日记 2024/6/30 8:32:47

C++自定义智能指针

template <class T> class counted_ptr;// 智能指针引用计数类 template <class T> class Ref_Ptr {friend class counted_ptr<T>; private:T* m_pTtr; // 实际的指针size_t counted_ptr; // 引用计数Ref_Ptr(T* p);virtual ~Ref_Ptr(); };template <clas…...

编程日记 2024/6/30 8:31:46

一个合理的前端应用文件结构

在大型应用中&#xff0c;最关键且最具挑战性的方面之一就是拥有一个良好且合理的文件结构。在考虑通过微前端将代码库拆分成多个应用之前&#xff0c;可以遵循一些步骤来改善项目级别的架构&#xff0c;并在您考虑这一路径时使过渡更容易。 我们的目标是应用某种模块化方法&am…...

编程日记 2024/6/30 8:30:45

spring和springboot的关系是什么？

大家好&#xff0c;我是网创有方的站长&#xff0c;今天给大家分享下spring和springboot的关系是什么&#xff1f; Spring和Spring Boot之间的关系可以归纳为以下几个方面&#xff1a; 技术基础和核心特性&#xff1a; Spring&#xff1a;是一个广泛应用的开源Java框架&#…...

编程日记 2024/6/30 8:28:43

智慧校园-医务管理系统总体概述

智慧校园医务管理系统&#xff0c;作为校园健康管理体系的智能化升级&#xff0c;深度融合信息技术与医疗服务&#xff0c;为师生构筑起一道全方位的健康守护网。医务管理系统以提升校园医疗服务水平、优化健康管理流程为核心目标&#xff0c;通过一系列创新功能&#xff0c;确…...

编程日记 2024/6/30 8:26:41

AUTOSAR汽车电子嵌入式编程精讲300篇-智能网联汽车CAN总线-基于电压信号的CAN总线入侵检测系统设计与实现

目录 前言 入侵检测系统研究现状 入侵检测系统建模 CAN总线 入侵检测威胁模型 Deep SVDD模型 入侵检测系统方案设计 挑战和解决方案 差分信号的采集与处理 差分信号的特征提取 入侵检测模型的设计 入侵检测系统性能评估 实验环境设置 不同的车辆状态 不同数量的…...

编程日记 2024/6/30 8:25:40

BLACKBOX.AI：解锁编程学习新纪元，加速开发的AI得力助手

文章目录 &#x1f4af;BLACKBOX.AI 官网&#x1f341;1 BLACKBOX.AI 工具使用教程&#x1f341;2 BLACKBOX.AI工具使用界面介绍&#x1f341;3 Chat(聊天)功能&#x1f341;4 Explore (探索)功能&#x1f48e;4.1 Terminal(终端)功能&#x1f48e;4.2 Discover(发现)功能&…...

编程日记 2024/6/30 8:24:39

实验三 时序逻辑电路实验

仿真 链接&#xff1a;https://pan.baidu.com/s/1z9KFQANyNF5PvUPPYFQ9Ow 提取码&#xff1a;e3md 一、实验目的 1、通过实验&#xff0c;理解触发的概念&#xff0c;理解JK、D等常见触发器的功能&#xff1b; 2、通过实验&#xff0c;加深集成计数器功能的理解&#xff0c;掌…...

编程日记 2024/6/30 8:23:38

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/6/19 11:27:27

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/6/17 0:45:39

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/6/20 11:37:48

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/6/21 2:24:34

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/6/19 12:34:35

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/6/20 13:20:25

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/6/17 23:13:07

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/6/21 2:48:45

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/6/16 11:09:52

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/6/20 15:06:56