消除javaScript Cookies的安全隐患，实现用户相关数据本地存储

本文链接：https://blog.csdn.net/u013005050/article/details/51966626

我在初次写javaScript的时候，存在一定的安全隐患，我并没有认识到，在不断地写代码的过程中，解除了初次写的携带的安全隐患。

请看如下代码，内含我初次写的代码具备的安全隐患的原因，以及解决办法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cookie</title>
</head>
<body οnlοad="setCookie('username','admin',12)">
<button οnclick="getCookie('username')">点我</button>
</body>
<script>
    function setCookie(myKey, myValue, MyDay) {
        //当前的时间。
        var today = new Date();
        //设置存储到未来时间的时间戳。
        today.setTime(today.getTime() + MyDay * 24 * 60 * 60 * 1000);//毫秒
        //把未来时间的时间戳转换为将来的格林尼治标准时间。
        var myTime = "expires=" + today.toGMTString();
        //cookie的存储格式，必须要以下为准。
        document.cookie = myKey + "=" + myValue + "; " + myTime;
    }

    //这种方法存在安全隐患，原因在这块代码中。
    //    function getCookie(myKey) {
    //        //trim() 函数移除字符串两侧的空白字符或其他预定义字符。
    //        var c = document.cookie.split(";");
    //        for (i = 0; i < c.length; i++) {
    //            var v = c[i].trim();
    //            if (v.indexOf(myKey) == 0) {
    //                //在判断v.indexOf(myKey) == 0，会有安全隐患。
    //                // 安全隐患：如果myKey传进来的值username相差几个字母或多几个字母
    //                // (例如:usern或userna等)，if(v.indexOf(myKey)==0)仍然会通过。
    //                var n = v.split("=");
    //                console.log(n);
    //                console.log(n[1]);//得到用户名
    //                return;
    //            }
    //        }
    //    }

    //这种方法存在安全隐患，原因在这块代码中。
    //    function getCookie(myKey) {
    //        //trim() 函数移除字符串两侧的空白字符或其他预定义字符。
    //        var c = document.cookie.split(";");
    //        for (i = 0; i < c.length; i++) {
    //            var v = c[i].trim();
    //            if (v.indexOf(myKey) == 0) {
    //                //在判断v.indexOf(myKey) == 0，会有安全隐患。
    //                // 安全隐患：如果myKey传进来的值username相差几个字母或多几个字母
    //                // (例如:usern或userna等)，if(v.indexOf(myKey)==0)仍然会通过。
    //                var n = v.split("=");
    //                console.log(n);
    //                console.log(n[1]);//得到用户名
    //                return;
    //            }
    //        }
    //    }

    //    //更新1：消除安全隐患。
    //    //方法：比较传进的myKey与用=分开的下标为0的值是否相等，
//如果相同则消除以上说的安全隐患情况。
    //    function getCookie(myKey) {
    //        //trim() 函数移除字符串两侧的空白字符或其他预定义字符。
    //        var c = document.cookie.split(";");
    //        for (i = 0; i < c.length; i++) {
    //            var v = c[i].trim();
                console.log(v);
    //            var n = v.split("=");
                console.log(n);
    //            if (myKey == n[0]) {
    //                console.log(n);
    //                console.log(n[1]);//得到用户名
    //                return;
    //            }
    //        }
    //    }


    //更新2：getCookie(myKey)消除安全隐患。方法：给myKey加=号。
    function getCookie(myKey) {
        //给传进来的key值加=号。
        var key = myKey + "=";
        //将存储的cookie分为两部分：用户信息和存储时间。
        var cookie = document.cookie.split(";");
        for (i = 0; i < cookie.length; i++) {
            //js的cookie在存储的时候，规定了有空格存留，trim()消除前后的空白。
            var value = cookie[i].trim();
            //indexOf(key)索引与value中到等号位置的索引，增强安全性。
            if (value.indexOf(key) == 0) {
                //stringObject.substring(start,stop)
                //start必需写。一个非负的整数，
                //规定要提取的子串的第一个字符在 stringObject 中的位置。
                //stop可选写。一个非负的整数，
                //比要提取的子串的最后一个字符在stringObject中的位置多1，
                //如果省略该参数，那么返回的子串会一直到字符串的结尾。
                console.log(value.substring(key.length, value.length));
                //return value.substring(key.length, value.length);
            }
        }
    }

</script>
</html>