zoukankan      html  css  js  c++  java
  • cookie JS验证码

    现在正在做一个CRM模块的网上商城项目,我的任务是完成用户和客户的注册,谈到注册,一般人都会有个大概的框图,譬如用户名不能重复了,要有验证码了等等。我所处理的方法都是用js来实现的,但是在验证码这,我还心存疑虑,总觉得不是这么做的。刚开始的方法是,随机生成一个四位的数字,用户填写的值要与这个验证码上出现的值相同才可以通过。后来,同学告诉我验证码牵涉的东西很多,包括背景图片的加载,还有字符等等。这些都跟cookie有关。g.cn了下,发现JS实现验证码的大同小异,都是简单的操作。后来发现一个程序用到了一个cookie,于是自己也尝试着更改了下,变动是指把随机生成的字符存储在cookie里,在做验证的时候,再从cookie里获取。不知道这样能够防止恶意攻击呢?

    cookie究竟是个什么东东呢?

    说白了就是一个由服务端生成给客户端的。如果用户使用与上一次相同的浏览器访问上次的那个网站时,会把该cookie给服务端。也许举个熟悉的例子,你就知道了。你每次登陆一个网站的时候,如果你选中‘记住我’,下次的登录的时候,你的用户信息就直接显示在表单里,这样其实方便了很多。这是为什么呢?如果你选中‘记住我’,通知这次的请求会让Cookie通过HTTP Headers从服务器端返回到浏览器上。首先,服务器端在响应中利用Set-Cookie header来创建一个Cookie ,然后把相应的信息插入到指定的浏览器上。

    程序参考:

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>无标题页</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div id="divCode" style="background-color:White; 52px; height:16px; padding:5px; text-align:center; vertical-align:middle; letter-spacing:5px; border:solid 1px blue"><span></span><span ></span><span ></span><span ></span></div>
    </div>
    <input id="Button1" type="button" value="换一张" onclick="JavaScript:validteCode()"/>
    <input type="textedit" name="CODE" id="NAME_CODE"/>
    <input type="button" id="Button2" value="验证" onclick="validate()"/>
    </form>
    </body>
    </html>
    <script language="JavaScript" type="text/JavaScript">
    function validate()
    {
    /* var str="";
    var code = form1.CODE.value;
    var spans = document.getElementById("divCode").all;
    for(var i=0;i<4;i++)
    str = str+spans[i].innerHTML;
    if(str != code)
    alert("输入验证码有误!");*/

    var sso = getCookie("sso_code");
    var str= sso.toString();
    var temp = "";
    for(var i=0;i<str.length;i++)
    {
    if(str.charAt(i) != ',')
    temp = temp+str.charAt(i);
    }
    alert(temp);
    var code = form1.CODE.value;
    alert(code);
    if(code != temp)
    alert("输入验证码有误!");
    }
    function validteCode()
    {
    var codes = new Array(4); //用于存储随机验证码
    var colors = new Array("Red","Green","Gray","Blue","Maroon","Aqua","Fuchsia","Lime","Olive","Silver");
    for(var i=0;i < codes.length;i++)
    {//获取随机验证码
    codes[i] = Math.floor(Math.random()*10);
    }

    //把随机生成的值存储在cookie里。
    setCookie("sso_code",codes);
    var spans = document.getElementById("divCode").all;
    for(var i=0;i<spans.length;i++)
    {
    spans[i].innerHTML=codes[i];
    spans[i].style.color = colors[Math.floor(Math.random()*10)]; //随机设置验证码颜色

    }


    }
    document.onload = validteCode();

    //cookie

    /**
    * Read the JavaScript cookies tutorial at:
    * http://www.netspade.com/articles/javascript/cookies.xml
    */

    /**
    * Sets a Cookie with the given name and value.
    *
    * name Name of the cookie
    * value Value of the cookie
    * [expires] Expiration date of the cookie (default: end of current session)
    * [path] Path where the cookie is valid (default: path of calling document)
    * [domain] Domain where the cookie is valid
    * (default: domain of calling document)
    * [secure] Boolean value indicating if the cookie transmission requires a
    * secure transmission
    */
    function setCookie(name, value, expires, path, domain, secure)
    {
    document.cookie= name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
    }

    /**
    * Gets the value of the specified cookie.
    *
    * name Name of the desired cookie.
    *
    * Returns a string containing value of specified cookie,
    * or null if cookie does not exist.
    */
    function getCookie(name)
    {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1)
    {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
    }
    else
    {
    begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1)
    {
    end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
    }

    /**
    * Deletes the specified cookie.
    *
    * name name of the cookie
    * [path] path of the cookie (must be same as path used to create cookie)
    * [domain] domain of the cookie (must be same as domain used to create cookie)
    */
    function deleteCookie(name, path, domain)
    {
    if (getCookie(name))
    {
    document.cookie = name + "=" +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
    }


    </script>

  • 相关阅读:
    mysql常用基本命令
    mysql8.0.13下载与安装图文教程
    k8s ingress 增加跨域配置
    Jenkins 备份恢复插件 thinBackup 使用
    k8s HA master 节点宕机修复
    nginx 跨域问题解决
    mongodb 3.4.24 主从复制
    k8s 线上安装 jenkins并结合 jenkinsfile 实现 helm 自动化部署
    k8s helm 运用与自建helm仓库chartmuseum
    centos6 源码安装 unzip
  • 原文地址:https://www.cnblogs.com/y0umer/p/3839357.html
Copyright © 2011-2022 走看看