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

刺骨的言语ヽ痛彻心扉 2022-09-23 14:00 164阅读 0赞

我在初次写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>

补充：

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