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

来源：互联网发布：巨人网络官网编辑：程序博客网时间：2024/05/01 09:29

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Cookie</title></head><body onload="setCookie('username','admin',12)"><button onclick="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>

补充：

删除cookie：将cookie的有效期设置为过期的时间就可以。

1 0