防止浏览器记住密码的技术方案

防止浏览器记住密码的技术方案

在Web开发中，如何防止浏览器记住密码是一个常见的需求。本文将从问题分析、解决方案到具体实现，详细介绍如何通过CSS和JavaScript等技术手段，实现密码输入框的自定义样式，从而避免浏览器自动填充密码。

一、问题引入

在某些场景下，用户可能不希望浏览器记住密码，例如在公共电脑上登录时。然而，浏览器通常会捕捉并记录用户的密码输入，这可能会带来安全风险。因此，我们需要找到一种方法来阻止浏览器自动保存密码。

二、问题分析

问题的根源在于浏览器会捕捉用户的密码输入记录，并以最后一次输入为节点进行存储。这意味着，只要密码输入框被触发，浏览器就有可能记录下密码。因此，我们需要找到一种方法来避免浏览器捕捉密码输入。

三、解决方案

使用CSS属性-webkit-text-security模拟密码展示与隐藏

-webkit-text-security是一个CSS属性，可以用来控制文本的显示方式。其属性值包括：

• none：文本不进行任何处理，显示原始文本。
• disc：将文本替换为实心圆点（•）。
• circle：将文本替换为空心圆圈（○）。
• square：将文本替换为空心方块（□）。
• disclosure-closed：将文本替换为实心三角形（▶）。
• disclosure-open：将文本替换为倒三角形（▼）。

页面登录表单示例

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="login_form" @keyup.enter.native="submitForm('ruleForm')">
 <el-form-item label="" prop="userName" style="margin-bottom: 28px">
 <el-input placeholder="请输入账号" type="text" prefix-icon="el-icon-user" v-model="ruleForm.userName" @blur="checkUserHasFreeApi"
 clearable>
 </el-input>
 </el-form-item>
 <el-form-item label="" prop="password">
 <el-input :class="showPassword?'':'pwd'" :disabled="Boolean(timeStr)" placeholder="请输入密码" type="text"
 prefix-icon="el-icon-lock" v-model="ruleForm.password" clearable>
 </el-input>
 <i class="show_password" @click="showPassword = !showPassword"
 :class="showPassword?'font_family icon-biyanjing':'font_family icon-yanjing1'"></i>
 </el-form-item>
 </el-form>

CSS样式

.pwd {
 /deep/ .el-input__inner {
 -webkit-text-security: disc !important;
 }
 }

四、兼容性

1. 目前，-webkit-text-security属性仅在基于WebKit引擎的浏览器中进行兼容，包括Google Chrome、Safari等。然而，该属性在其他主流浏览器中并不被支持，如Mozilla Firefox、Microsoft Edge等。因此，在使用-webkit-text-security属性时，应注意浏览器的兼容性问题。

2. 为了解决兼容性问题，可以使用其他解决方案，如JavaScript或服务器端加密。JavaScript可以用来在所有浏览器中实现文本掩盖效果。而服务器端加密可以在后端处理敏感信息的显示，从而降低前端CSS属性的依赖性。

<input type="password" id="password-input" />
<script>
 const passwordInput = document.getElementById('password-input');
 passwordInput.addEventListener('input', () => {
 passwordInput.value = '*'.repeat(passwordInput.value.length);
 });
</script>

3. 参考库text-security，实现了-webkit-text-security的效果。text-security是一个精巧的字体集合，仅由三种字符形状构成：圆盘、圆形和方形，类似于传统密码字段中的掩码符号。通过设定特定的字体家族（如font-family: "text-security-disc"）。实测结果：placeholder也会被加密，其他表现与-webkit-text-security: disc一致。

五、记住密码样式

记住密码默认样式可修改

/deep/ input:-webkit-autofill {
 // -webkit-box-shadow: 0px 0px 0px 20px rgb(32, 85, 104) inset;
 -webkit-box-shadow: 0px 0px 0px transparent inset !important;
 // background: transparent !important;
 -webkit-text-fill-color: transparent !important;
 }