原文网址:浏览器记住密码--原理/不记住密码的方法_IT利刃出鞘的博客-CSDN博客

简介

本文介绍浏览器是如何自动跳出保存密码的提示的,并介绍如何让浏览器不自动跳出保存密码的提示的方法。

记住密码的复现

前端代码

 login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页</title><script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head><body><form id="login-form"><label for="username">用户名:</label><input type="text" name="username" id="username"><label for="password">密码:</label><input type="password" name="password" id="password"><!--下边这样写也可以<label for="username">用户名:<input type="text" name="username" id="username"></label><label for="password">密码:<input type="password" name="password" id="password"></label>-->
</form><div id="error-message"></div>
<button onclick="loginViaFormData()">登录</button><script>function loginViaFormData() {$.ajax({type: "post",url: "http://localhost:8080/login",data: $("#login-form").serialize(), // 序列化form表单里面的数据传到后台//dataType: "json", // 指定后台传过来的数据是json格式success: function (result) {if (!result.success) {$("#errormessage").text("用户名或密码错误");} else if (result.success) {alert("登录成功");// 跳到index.html页面window.location.href="index.html";}}})}
</script></body>
</html>

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div class="container">登录成功后的页面
</div></body>
</html>

后端接口

用SpringBoot写一个最简单的登录接口。

Controller

package com.example.controller;import com.example.entity.LoginVO;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;//跨域
@CrossOrigin
//Rest风格:返回JSON
@RestController
public class LoginController {@PostMapping("login")public LoginVO login(String username,String password) {//省略对用户名和密码的判断LoginVO loginVO = new LoginVO();loginVO.setSuccess(true);loginVO.setData("This is data");return loginVO;}
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.12.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>demo_SpringBoot</artifactId><version>0.0.1-SNAPSHOT</version><name>demo_SpringBoot</name><description>Demo project for Spring Boot</description><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency></dependencies>
</project>

测试

1.访问login.html

2.输入用户名和密码

用户名:输入abc;密码:输入 1234

3.点击登录

4.点击确定

浏览器记住密码的原理

        只要有<input type="password" xxx>,当页面变动时,浏览器会提示是否保存密码。如果选择了保存,则下次再访问此页面时,可以选择将保存的账号和密码填充进去。

网上有其他说法是这样的:当 <input xxx> 与 <input type="password" xxx> 紧挨着时,如果页面变动,才会触发。但是,我自己测试,只要有<input type="password" xxx>,就会触发浏览器保存密码的弹框提示。

被作为用户名的标签:<input type="password" xxx>之前的<input type='xxx'>。注意:这个xxx必须是是任意可以输入的的type,比如:text, tel, email。下次访问这个页面时浏览器会展示曾经输入过的用户名。

这个被浏览器认为是用户名的input不能是隐藏域(即使有默认值也不行)。如果是隐藏域,浏览器会继续向上边查找,直到找到非隐藏域的input,将其作为用户名。

浏览器记用户名的时候是通过input标签的name属性和id属性来记的。先name,后id:有name就按name记录,否则按照id记录,显示的时候也按照这个规则。

不弹出记住密码提示的方案

方案

说明

当浏览器发现跳转的下一个页面有<input type="password" xxx>的时候,是不会弹出“记住密码”弹窗的 。

所以解决方案是:在跳转的页面添加一个不可见的<input type="password" xxx>。

错误的方案

<div style="display:none;"><input type="text" name="username" autocomplete="off"/><input  type="password" name="password" autocomplete="off" readonly/>
</div>

input 不能被隐藏,只要被隐藏,浏览器就识别不到它了。

正确的方案

<div style="display:block; opacity: 0; width:0; height:0; overflow: hidden"><input type="text" name="username" autocomplete="off"/><input type="password" name="password" autocomplete="off" readonly/>
</div>

这样,没有隐藏input,也没隐藏外层div,只不过将div 的长宽都设置为0,透明度设置为0,里面内容超出div部分不挤出外层,这样子就伪造了input 的不可见,就不影响登陆成功的页面布局,也成功阻止了chrome浏览器记住密码框的弹出。

实测

前端页面

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页</title><script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
</head><body><form id="login-form"><label for="username">用户名:</label><input type="text" name="username" id="username"><label for="password">密码:</label><input type="password" name="password" id="password">
</form><div id="error-message"></div>
<button onclick="loginViaFormData()">登录</button><script>function loginViaFormData() {$.ajax({type: "post",url: "http://localhost:8080/login",data: $("#login-form").serialize(), // 序列化form表单里面的数据传到后台//dataType: "json", // 指定后台传过来的数据是json格式success: function (result) {if (!result.success) {$("#errormessage").text("用户名或密码错误");} else if (result.success) {alert("登录成功");// 跳到index.html页面window.location.href="index.html";}}})}
</script></body>
</html>

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>This is title</title>
</head><body><div class="container">登录成功后的页面
</div><div style="display:block; opacity: 0; width:0; height:0; overflow: hidden"><input type="text" name="username" autocomplete="off"/><input type="password" name="password" autocomplete="off" readonly/>
</div></body>
</html>

后端接口

package com.example.controller;import com.example.entity.LoginVO;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;//跨域
@CrossOrigin
//Rest风格:返回JSON
@RestController
public class LoginController {@PostMapping("login")public LoginVO login(String username,String password) {//省略对用户名和密码的判断LoginVO loginVO = new LoginVO();loginVO.setSuccess(true);loginVO.setData("This is data");return loginVO;}
}

测试

1.访问login.html

2.输入用户名和密码

用户名:输入abc;密码:输入 1234

3.点击登录

4.点击确定

可以看到,没有提示保存密码。

其他网址

google chrome 浏览器阻止自动弹出记住密码的解决方案_新一代源代码-CSDN博客

关于chrome记住密码的规则 - SegmentFault 思否14652

浏览器记住密码--原理/不记住密码的方法相关推荐

  1. 怎么知道 网站是否直接明文保存密码_忘记账号密码 浏览器记住了 怎么找回密码?...

    对于健忘又没有使用保存密码插件的习惯的人来说,忘记密码是经常的事情. 而大家知道的也就是通过网站的找回密码选项,通过邮箱,手机号,人工等方式找回密码,但是如果是个小网站,没有找回的功能,或者当时是随便 ...

  2. 禁止浏览器记住密码和自动填充密码

    禁止浏览器记住密码和自动填充密码 1.在不输入时设置为只读(只能做到禁用自动填充) <FormItem label="密码" prop="password" ...

  3. html如何记住用户名,js填写账号密码 用js怎样实现记住用户名和密码

    js实现自动输入账号.密码 在登陆某一个网站的时候,怎样自动输入账号.密码.浏览器本身没有记录C亲,百度那些就是记录了cookie后才能实现的,你没发现浏览器在你输入用户名和密码的时候弹出一个提示框提 ...

  4. html 记住账号密码,纯JS记住账号密码

    很多登录功能上都有个"记住密码"的功能,其实无非就是对cookie的读取. 引用 添加Cookie setCookie ( name, value, expdays ) 获取Coo ...

  5. SVN添加账户及删除MyEclipse中记住的SVN账户名密码信息

    我也不知道我们用的SVN服务器软件叫什么,不是我所熟知的TortoiseSVN,整个内容放在一个SVN的文件夹下,用户名是authz文件里添加的,密码是在passwd文件中.也不知道是什么服务器,这里 ...

  6. 激活锁忘记了id和密码怎么办?记住这几步,很有用!

    激活锁忘记了id和密码怎么办?如果设备丢失或者失窃,手机里的隐私信息会存在安全隐患,为了防止这种情况出现,我们可以开启激活锁保护我们的设备安全.在我们打开手机上的"查找我的设备"以 ...

  7. Windows 10 远程桌面记住密码 (mstsc 怎么记住密码)

    远程桌面记住密码 mstsc 怎么记住密码: 进入控制面板, 凭据管理器,windows凭据中: 添加普通凭据: 地址:TERMSRV/服务器地址 然后填写用户名和密码即可

  8. git 记住账号密码和清除账号密码

    git 默认不记住账号密码,每次 clone 都要输入账号密码: 记住账号密码: 我们执行下面的命令 git config --global credential.helper store 这个命令其 ...

  9. php记住用户名密码,记住帐号、记住密码、记住表单信息等“记住”的实现

    登录界面有记住帐号.记住密码,留言时有记住表单信息等,这使得用户在下次访问该页面时不用重复地输入重复的信息,减少重复劳动.网页设计者当然要满足用户的需求,那么PHP是怎么实现这些"记住&qu ...

最新文章

  1. 一文详解激光点云的地面分割
  2. redux provider源码解析
  3. Windows下的.NET+ Memcached安装
  4. 专家称 AI 可以在 120 年内接管人类的所有工作
  5. 量子是什么?为什么可以用来给通信加密?
  6. Matlab导出高DPI图像——生成高分辨率.eps .tiff .jpg
  7. 5个实用提速深度学习模型的方法
  8. 递归 - 求数字/字符串的全排列
  9. 怎么配置 Oracle 侦听器来使用SQL操作ST_Geometry
  10. 关于python变量_关于python变量练习题
  11. 深入理解jQuery插件开发(讲解jQuery开发的好文)
  12. jpeglib的jpeg_finish_compress函数疑似越界
  13. 【数字信号去噪】基于matlab遗传算法优化变分模态分解VMD数字信号去噪(目标函数为样本熵)【含Matlab源码 1982期】
  14. unity汉化补丁_Unity补丁发布计划
  15. Fedora 14 直接root登录
  16. 设置word07标题样式
  17. 计算机未来设计建筑,未来设计的趋势解析,参数化设计及创意设计案例欣赏
  18. Windows11 Store应用商店下载的软件,怎么创建快捷方式
  19. Redis学习笔记(数据结构篇)String
  20. SM2算法的加密签名消息语法规范(二)如何构造

热门文章

  1. 如何测量电源的噪声(有视频)
  2. Python学习(六) 史上最全Pywinauto模块自动化操作软件
  3. 目标检测YOLO实战应用案例100讲-基于激光雷达的智能汽车多目标检测与跟踪方法研究
  4. 大宗交易数据挖掘(二)
  5. 我所体验的HP金牌售后服务
  6. 卓尔智联的产业互联网新玩法
  7. 亚马逊放弃AI招聘工具,人工智能依然不能取代人类招聘员
  8. pkill mysql_linux命令总结--pkill
  9. Linux | 权限概念
  10. 谈谈Android的中的Drawable