您的位置:首页 > Web前端 > JavaScript

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

2016-07-20 11:21 543 查看
我在初次写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的有效期设置为过期的时间就可以。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息