1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 0

浏览器记住密码–原理/不记住密码的方法本文介绍浏览器是如何自动跳出保存密码的提示的 并介绍如何让浏览器不自动跳出保存密码的提示的方法

原文网址：浏览器记住密码–原理/不记住密码的方法_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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233483.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号