如何使浏览器不提示记住密码

一、背景

     为了系统使用安全，需要使浏览器不提示记住密码。

     安全风险场景：对于公共使用的系统，A用户为了方便登录，选择了“记住密码”，B用户可以通过浏览器的密码管理查看到密码明文。

二、为什么浏览器会提示记住密码？

     浏览器提示记住密码是根据input标签的type=“password”类型实现的。如下图：

三、如何使浏览器不提示记住密码方法

方法一 ：

通过配置Input标签的属性

autocomplete="off" （大多数现代浏览器已不支持此属性）

autocomplete="new-password"（谷歌浏览器 、 Edge 、 IE 浏览器支持，火狐不支持）

方法二：

新添加两个输入框 ， type 分别设置为 text 和 password

设置 display： none 属性让其隐藏

（谷歌浏览器 、 Edge 、 IE 浏览器支持，火狐不支持）

方法三：

       把密码框的 type 定义为 text ，这样浏览器就无法正确自动识别 密码。给输入框绑定事件 ， 每次输入数据触发事件， 把 密码 替换成 圆点 ●

优点：没有浏览器兼容性问题

缺点：需要监控输入框的动作，代码逻辑复杂

方法四：

• 把input的type设置为text；
• 使用第三方字体库，把输入的内容变为黑点的字体（GitHub - kylewelsby/dotsfont: A work-around for -webkit-text-security property.）
• 为了防止通过修改样式，显示出密码，可以使用MutationObserver监听密码输入框的属性是否有变化，如果有变化，强制设置黑点字体

上码

        【1】引入dotfont字体库

        css

@font-face {

    font-family: 'dotsfont';

    src: url('./dotsfont-master/dist/dotsfont.eot');

    src: url('./dotsfont-master/dist/dotsfont.eot?#iefix') format('embedded-opentype'),

         url('./dotsfont-master/dist/dotsfont.woff') format('woff'),

         url('./dotsfont-master/dist/dotsfont.ttf') format('truetype'),

         url('./dotsfont-master/dist/dotsfont.svg#dotsfontregular') format('svg');

  }

        【2】输入框配置

<form>
   <label for="password">密码:</label>
   <input style="font-family: dotsfont;" type="text" id="password" name="password">
   <input type="submit">
</form>

如图：

        【3】使用MutationObserver监听密码框属性

        //创建一个观察者
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation=>{
                mutation.target.style.fontFamily ='dotsfont'
            })
        })
        //选择需要观察的节点
        const pwdDom = document.querySelector('#password');
        //配置观察选项
        const config = {
            attributes: true, // 监听属性的变化
            childList: true,
            subtree: true
        };
        //开始观察
        observer.observe(pwdDom, config)

推荐方法~~~~~~