关于360浏览器自动填充用户名和密码的问题



在工作中领导要我想一个问题,关于360浏览器会自动填充密码和用户名的问题,而且该死的input框还会变成屎黄色,丑到爆(用户端也可以自行设置浏览器不保存密码)


首先分享一下我的总结:
1. 一般都是cookie记住用户名和密码。可以设置禁止用户修改cookie,osc就这样做了!
eg:
PHP4
header("Set-Cookie: hidden=value; httpOnly");
PHP5
setcookie("abc", "test", NULL, NULL, NULL, NULL, TRUE);
最后一个参数为HttpOnly属性
2. Cookie另一个典型的应用是当登录一个网站时,网站往往会请求用户输入用户名和密码,并且用户可以勾选“下次自动登录”。如果勾选了,那么下次访问同一网站时,用户会发现没输入用户名和密码就已经登录了。这正是因为前一次登录时,服务器发送了包含登录凭据(用户名加密码的某种加密形式)的Cookie到用户的硬盘上。第二次登录时,(如果该Cookie尚未到期)浏览器会发送该Cookie,服务器验证凭据,于是不必输入用户名和密码就让用户登录了。


关于具体的360浏览器的问题,我做的demo(基于jQuery的)如下:
其主要的原理是用户名和密码都有两个input框,首先让假的input框获取焦点,然后让其隐藏,出现新的input框,输入进去用户名或者是密码。按其需要还需要对其进行改色(具体情况,需要具体看)


<html>
    <head>
        <meta charset="utf-8">
        <title>表单title>
        <script src="jquery-1.8.3.min.js">script>
    head>
    <body>
        <form>
            <p>
                <label>用户名:label>
                <input id="UN" maxlength="26" type="text" title="请输入用户名" /> 
                <input id="userName" name="user.userName" maxlength="26" style="display:none;" type="text" title="请输入用户名" /> 
            p>
            <p>
                <label>密  码:label>
                <input id="PWD" maxlength="20" type="text" title="请输入密码" /> 
                <input id="password" name="user.password" maxlength="20" style="display:none;" type="password" title="请输入密码" /> 
            p>
        form>
        <script>
            $(function(){ 
                $("#PWD").focus(function(){ 
                    $(this).hide(); 
                    $("#password").val("").show().css("backgroundColor","#fff").focus(); 
                });

                $("#password").blur(function(){
                    //360浏览器会自动的加成屎黄色,需要改掉
                    $(this).show().css("backgroundColor","#fff"); 
                    $("#PWD").hide(); 
                }); 
                $("#UN").focus(function(){ 
                    $(this).hide(); 
                    $("#userName").val("").show().css("backgroundColor","#fff").focus(); 
                }); 
                $("#userName").blur(function(){ 
                    $(this).show().css("backgroundColor","#fff"); 
                    $("#UN").hide(); 
                });  
            })
        script>
    body>
html>

你可能感兴趣的:(开发)