浏览器记住密码--原理/不记住密码的方法

我就是我 2023-10-01 08:46 81阅读 0赞

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

简介

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

记住密码的复现

前端代码

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录页</title>
  6. <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <form id="login-form">
  10. <label for="username">用户名:</label>
  11. <input type="text" name="username" id="username">
  12. <label for="password">密码:</label>
  13. <input type="password" name="password" id="password">
  14. <!--下边这样写也可以
  15. <label for="username">
  16. 用户名:<input type="text" name="username" id="username">
  17. </label>
  18. <label for="password">
  19. 密码:<input type="password" name="password" id="password">
  20. </label>-->
  21. </form>
  22. <div id="error-message"></div>
  23. <button onclick="loginViaFormData()">登录</button>
  24. <script>
  25. function loginViaFormData() {
  26. $.ajax(
  27. {
  28. type: "post",
  29. url: "http://localhost:8080/login",
  30. data: $("#login-form").serialize(), // 序列化form表单里面的数据传到后台
  31. //dataType: "json", // 指定后台传过来的数据是json格式
  32. success: function (result) {
  33. if (!result.success) {
  34. $("#errormessage").text("用户名或密码错误");
  35. } else if (result.success) {
  36. alert("登录成功");
  37. // 跳到index.html页面
  38. window.location.href="index.html";
  39. }
  40. }
  41. }
  42. )
  43. }
  44. </script>
  45. </body>
  46. </html>

index.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>This is title</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9. 登录成功后的页面
  10. </div>
  11. </body>
  12. </html>

后端接口

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

Controller

  1. package com.example.controller;
  2. import com.example.entity.LoginVO;
  3. import org.springframework.web.bind.annotation.CrossOrigin;
  4. import org.springframework.web.bind.annotation.PostMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. //跨域
  7. @CrossOrigin
  8. //Rest风格:返回JSON
  9. @RestController
  10. public class LoginController {
  11. @PostMapping("login")
  12. public LoginVO login(String username,
  13. String password) {
  14. //省略对用户名和密码的判断
  15. LoginVO loginVO = new LoginVO();
  16. loginVO.setSuccess(true);
  17. loginVO.setData("This is data");
  18. return loginVO;
  19. }
  20. }

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4. <modelVersion>4.0.0</modelVersion>
  5. <parent>
  6. <groupId>org.springframework.boot</groupId>
  7. <artifactId>spring-boot-starter-parent</artifactId>
  8. <version>2.3.12.RELEASE</version>
  9. <relativePath/> <!-- lookup parent from repository -->
  10. </parent>
  11. <groupId>com.example</groupId>
  12. <artifactId>demo_SpringBoot</artifactId>
  13. <version>0.0.1-SNAPSHOT</version>
  14. <name>demo_SpringBoot</name>
  15. <description>Demo project for Spring Boot</description>
  16. <dependencies>
  17. <dependency>
  18. <groupId>org.springframework.boot</groupId>
  19. <artifactId>spring-boot-starter-web</artifactId>
  20. </dependency>
  21. </dependencies>
  22. </project>

测试

1.访问login.html

c2c79595a8724383bdd4d1bd22e04d5f.png

2.输入用户名和密码

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

ac57d8c52a034775ac21caa81d415283.png

3.点击登录

a5a082b6a03049eab569562cf3d991e9.png

4.点击确定

14542e45862c4873b3232955d46c8521.png

浏览器记住密码的原理

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

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

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

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

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

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

方案

说明

当浏览器发现跳转的下一个页面有的时候,是不会弹出“记住密码”弹窗的 。

所以解决方案是:在跳转的页面添加一个不可见的

错误的方案

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

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

正确的方案

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

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

实测

前端页面

login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录页</title>
  6. <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <form id="login-form">
  10. <label for="username">用户名:</label>
  11. <input type="text" name="username" id="username">
  12. <label for="password">密码:</label>
  13. <input type="password" name="password" id="password">
  14. </form>
  15. <div id="error-message"></div>
  16. <button onclick="loginViaFormData()">登录</button>
  17. <script>
  18. function loginViaFormData() {
  19. $.ajax(
  20. {
  21. type: "post",
  22. url: "http://localhost:8080/login",
  23. data: $("#login-form").serialize(), // 序列化form表单里面的数据传到后台
  24. //dataType: "json", // 指定后台传过来的数据是json格式
  25. success: function (result) {
  26. if (!result.success) {
  27. $("#errormessage").text("用户名或密码错误");
  28. } else if (result.success) {
  29. alert("登录成功");
  30. // 跳到index.html页面
  31. window.location.href="index.html";
  32. }
  33. }
  34. }
  35. )
  36. }
  37. </script>
  38. </body>
  39. </html>

index.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>This is title</title>
  6. </head>
  7. <body>
  8. <div class="container">
  9. 登录成功后的页面
  10. </div>
  11. <div style="display:block; opacity: 0; width:0; height:0; overflow: hidden">
  12. <input type="text" name="username" autocomplete="off"/>
  13. <input type="password" name="password" autocomplete="off" readonly/>
  14. </div>
  15. </body>
  16. </html>

后端接口

  1. package com.example.controller;
  2. import com.example.entity.LoginVO;
  3. import org.springframework.web.bind.annotation.CrossOrigin;
  4. import org.springframework.web.bind.annotation.PostMapping;
  5. import org.springframework.web.bind.annotation.RestController;
  6. //跨域
  7. @CrossOrigin
  8. //Rest风格:返回JSON
  9. @RestController
  10. public class LoginController {
  11. @PostMapping("login")
  12. public LoginVO login(String username,
  13. String password) {
  14. //省略对用户名和密码的判断
  15. LoginVO loginVO = new LoginVO();
  16. loginVO.setSuccess(true);
  17. loginVO.setData("This is data");
  18. return loginVO;
  19. }
  20. }

测试

1.访问login.html

c2c79595a8724383bdd4d1bd22e04d5f.png

2.输入用户名和密码

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

ac57d8c52a034775ac21caa81d415283.png

3.点击登录

a5a082b6a03049eab569562cf3d991e9.png

4.点击确定

24c0f72fad764ac18535edcf71689828.png

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

其他网址

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

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

发表评论

表情:
评论列表 (有 0 条评论,81人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Git 设置记住密码

    在git push时每次都要输入用户名和密码是一件很痛苦的事,其实解决方法很简单步骤如下: 1. 在项目文件夹(包含隐藏文件夹.git文件夹的)内右键 git bash h