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

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

原文网址：[浏览器记住密码--原理/不记住密码的方法\_IT利刃出鞘的博客-CSDN博客][--_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">
    
        
    </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/> 
        </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

![c2c79595a8724383bdd4d1bd22e04d5f.png][]

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

![ac57d8c52a034775ac21caa81d415283.png][]

3.点击登录

![a5a082b6a03049eab569562cf3d991e9.png][]

4.点击确定

![14542e45862c4873b3232955d46c8521.png][]

## 浏览器记住密码的原理 ##

只要有<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>。

**错误的方案**

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

**正确的方案**

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

### 实测 ###

**前端页面**

<!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>

**后端接口**

**测试**

1.访问login.html

![c2c79595a8724383bdd4d1bd22e04d5f.png][]

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

![ac57d8c52a034775ac21caa81d415283.png][]

3.点击登录

![a5a082b6a03049eab569562cf3d991e9.png][]

4.点击确定

![24c0f72fad764ac18535edcf71689828.png][]

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

## 其他网址 ##

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

[关于chrome记住密码的规则 - SegmentFault 思否14652][chrome_ - SegmentFault _14652]

[--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121782191
[c2c79595a8724383bdd4d1bd22e04d5f.png]: https://img-blog.csdnimg.cn/c2c79595a8724383bdd4d1bd22e04d5f.png
[ac57d8c52a034775ac21caa81d415283.png]: https://img-blog.csdnimg.cn/ac57d8c52a034775ac21caa81d415283.png
[a5a082b6a03049eab569562cf3d991e9.png]: https://img-blog.csdnimg.cn/a5a082b6a03049eab569562cf3d991e9.png
[14542e45862c4873b3232955d46c8521.png]: https://img-blog.csdnimg.cn/14542e45862c4873b3232955d46c8521.png
[24c0f72fad764ac18535edcf71689828.png]: https://img-blog.csdnimg.cn/24c0f72fad764ac18535edcf71689828.png
[google chrome _-CSDN]: https://blog.csdn.net/qq_35264415/article/details/105160728
[chrome_ - SegmentFault _14652]: https://segmentfault.com/a/1190000006914652