防止浏览器记住密码

阅读目录

• 一、问题引入
• 二、问题分析
• 三、解决方案
• 四、兼容性
• 五、记住密码样式

一、问题引入

客户要求登录时，不能被浏览器截取记录密码

 

二、问题分析

问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。

三、解决方案

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

属性值如下：

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;
            }