禁止(防止)浏览器自动填充密码

时间: 2019-04-09阅读: 230标签: 浏览器
由于设置autocomplete属性和添加隐藏文本框,以及在初始化时阻止写入等方法都无法完全满足需求,所以只能通过js逻辑来控制。 



效果图

主要代码  

/**
*
* 禁止浏览器自动填充密码
*
* @method disabledRememberPassword
* @param {any} el 目标(可多个)
*
*/
function disabledRememberPassword(el) {
    var _el = typeof el === 'object' ? el : $(el);
    if (!_el || _el.length == 0)
        return;
    _el.each(function (index, item) {
        $(item).attr('ilength', 0).attr('autocomplete', 'off').attr('type', 'text').attr('readonly', 'readonly').val('').on('focus', function () {
            this.type != 'password' ? this.type = 'password' : 1;
        }).on('mouseout', function () {
            this.setAttribute('readonly', 'readonly');
        }).on('mouseover', function () {
            this.removeAttribute('readonly');
        }).on('input', function () {
            this.setAttribute('ilength', this.value.length > item.attributes['ilength'].value ? ++item.attributes['ilength'].value : --item.attributes['ilength'].value);
        });
        var clear = () => {
            !item.value ? setTimeout(check, 500) : (item.value = '', setTimeout(clear, 100));
        };
        var check = () => {
            item.value.length != item.attributes['ilength'].value ? (item.setAttribute('ilength', 0), item.value.length == 0 ? setTimeout(check, 500) : (layer.tips('检测到密码输入异常,已自动拦截', item, {
                tips: [2, '#000000'],
                time: 2000
            }), clear())) : setTimeout(check, 500);
        };
        check();
    });
}

说明:其中提示相关的代码使用的是layui的layer模块,可以换成自己想用的东西,或者不进行任何提示。


使用方式

单个

<body>
<input id="password"/>
</body>
<script>
  $(function(){
    disabledRememberPassword('#password');
    //或者
    disabledRememberPassword($('#password'));
  })
</script>

多个

<body>
<input id="password_0">
<input id="password_1">
......
</body>
<script>
    $(function(){
        disabledRememberPassword('#password_0,#password_1')
        //或者
        disabledRememberPassword($('#password_0,#password_1'))
    })
</script>

也可以直接写在body的onload中

<body onload="disabledRememberPassword('#password')">
    <input id="password" />
</body>


总结

其实比较完善的解决方式是:在登录页以及其他会使浏览器提示是否记住密码的页面,放置说明和提示,告知用户这样操做会存在风险,在需要输入密码的地方使用这个js方法进行防范

监听浏览器刷新及关闭

为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。

简洁明了探索浏览器Event loop

前段时间我对于浏览器Event loop中的MacroTask和MicroTask哪个先执行有所困惑,苦于搜索也没有发现很明确的答案,于是决定深入探索浏览器Event loop,现有所愚见,想与大家分享

微软新 Edge 有时会假扮成不同浏览器

Chromium 版 Microsoft Edge 近日被发现会根据所访问的站点模拟其他浏览器。这可能是出于兼容性原因。随着新版 Edge 的发布,微软现在使用 Chromium Blink 引擎而不是原始的 EdgeHTML 引擎。

解决v-lazy-image在qq浏览器x5内核下无效

在安卓qq浏览器中,v-lazy-image始终无法显示。经调试,发现qq浏览器中IntersectionObserver缺少一个isIntersecting字段,而v-lazy-image插件是根据isIntersecting来显示图片的

js通过window.navigator获取平台信息

获取浏览器信息需要使用navigator.userAgent 对象 根据获取到的内容判断浏览器信息navigator.userAgent。IE11浏览器 已经不能用msic 来判断是否是IE11了

Google阻止我写Web浏览器?

Metastream 创始人 Samuel Maddock 在其博客中称:“过去的两年中,我一直致力于一个网页浏览器的开发,却被谷歌阻止。开源浏览器 Chrome 的创建者竟不允许将数字版权授予开源项目。

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

总结整理HTML5浏览器支持情况总结整理HTML5浏览器支持情况

HTML5浏览器支持情况:现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等,通过对这些主流web浏览器的发展策略调查,发现它们都支持HTML5上采取了措施。

js监听浏览器后退事件

如果在浏览器执行了回退操作,则会触发页面弹出“不可回退”弹框,当然这里可以进行你所需要的不同的处理; 代码如下:

浏览器将标签转成 DOM 的过程

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全