网络安全最全cookie的简单介绍_cookie教学(3)，2024年最新互联网大厂100道网络安全面试题助你冲关金三银四

最新推荐文章于 2025-02-17 15:03:11 发布

原创最新推荐文章于 2025-02-17 15:03:11 发布

· 679 阅读

19 ·

版权

文章标签：

#网络安全 #学习 #面试

程序员专栏收录该内容

222 篇文章

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

cookie的使用

其实, 如果是单纯的身份验证场景下, 前端开发是用不到cookie的

从服务器发送cookie给浏览器, 浏览器保存cookie, 到浏览器每次发送请求 ,携带着cookie文件, 这些事情浏览器全部都可以自己完成. 根本不需要我们前端开发人员参与.

但我们有时也会利用cookie, 在前端存储一些状态信息.

比如某个视频看到了32分15秒.

我们可以通过前端操作, 直接将这个数据保存在本地cookie文件中

下次打开网站, 我们再次读取这个信息

然后直接向服务器请求32分16秒的视频内容.

前端如何通过JS操作cookie

cookie的使用方式很简单，系统提供的只有一个属性 document.cookie，无论是存还是取或者其他操作都是通过这一个属性来完成（注：cookie是http协议下的技术，所以不要用file的方式打开本地html文件测试cookie，虽然由部分浏览器也在file协议下实现了cookie，但是不推荐这么做）。

首先，我们来看看如何存：

document.cookie = 'username=dary' // 存一条username为dary的cookie

但是如果当我们要存一条中文的cookie，比如：username=张三，在部分低版本浏览器就会遇到一些位置错误，这时就可以使用 encodeURIComponent 编码对中文进行编码：

document.cookie = `username=encodeURIComponent('大林')`

可以看到，中文内容已经被编码了，以后取得时候我们可以通过decodeURIComponent 方法进行解码，下文会提到

cookie的时效性

现在我们回头去看看上面我们存过的cookie，其中有Expires/max-Age选项，这一项指的就是cookie的有效期，我们可以看到是session，代表会话期，也就是默认的会话结束cookie失效，这时我们重启浏览器就看不到这条cookie了。

除了默认的会话过期我们还可以手动设置cookie的过期时间，比如：7天后过期

var date = new Date()
date.setDate(date.getDate() + 7)
document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`

我们可以看到过期时间已经是7天以后了，这里我用了toUTCString()方法转成了标准时区，所以比北京时间快8个小时，这时我们关闭浏览器再次打开，仍然可以看到这条cookie

cookie的存储路径

我们来测试一下路径，随便进入项目中某一个目录或者新建一个目录，然后把一下代码放进去执行

document.cookie = 'username=dary'

我们可以看到，path不再是之前的 / 了，而是当前目录，这时我们再回到首页，你会发现，这条cookie不见了，因为外层时访问不了内层目录存的cookie的。

所以我们一般存cookie都会这么写：

document.cookie = 'username=dary;path=/'

不管当前目录是谁统一存根目录，这样项目中任意位置都可以访问这一条cookie，这就perfect 啦！

由此：我们可以封装一个存储cookie的方法如下：

/** 存一条cookie
 * @param {string} key 要存的cookie的名称
 * @param {string} value 要存的cookie的值
 * @param {object} [options] 可选参数，过期时间和目录，如：{ path: '/', expires: 7 }存根目录7天过期的cookie
 */
function setCookie (key, value, options) {
    var str = `${key}=${encodeURIComponent(value)}`
    // 先判断options是否传进来了
    if (options) {
        // 如果传进来了再判断有哪个属性
        if (options.path) {
            // 路径拼接进去
            str += `;path=${options.path}`
        }
        if (options.expires) {
            var date = new Date()
            // 日期设置为过期时间
            date.setDate(date.getDate() + options.expires)
            str += `;expires=${date.toUTCString()}`
        }
    }
    document.cookie = str
}

取cookie

现在我们掌握了如何存cookie，接下来看看怎么取吧

取cookie同样使用document.cookie这个属性：

console.log(document.cookie) // username=dary

但是如果我们在一个网站里存了多条cookie，这个时候得到的结果就是

console.log(document.cookie) // username=dary; age=18

多条cookie之间以;  隔开，注意：这里是分号和一个空格，这个对我们拆开每一条cookie非常重要。所以我们现在希望能把cookie每一条拆开，得到一个对象，这样就可以取得某一条cookie的值了，所以我们可以封装一个获取cookie的方法如下：

/** 获取某一条cookie
 * @param {string} key 要获取的cookie的名称
 * @retrun {string} 当前这条cookie的值
 */
getCookie (key) {
    var str = document.cookie
    var arr = str.split('; ')
    var obj = new Object()
    arr.forEach(item => {
        var subArr = item.split('=')
        obj[subArr[0]] = decodeURIComponent(subArr[1])
    })
    return obj[key]
}

删除cookie

删除cookie的方式特别简单，我们只需要把cookie的过期时间设置为已经过去了的时间就行了，这个时候浏览器一看，诶？这条cookie不是已经过期了么？就只能把它删掉了，方法如下：

/** 删一条cookie
 * @param {string} key 要删的cookie的名称
 * @param {path} [path] 可选参数，要删的cookie的所在的路径，如果就是当前路径这个参数可以不传
 */
function removeCookie (key, path) {
    var date = new Date()
    date.setDate(date.getDate() - 1) // 过期时间设置为昨天
    var str = `${key}='';expires=${date.toUTCString()}`
    if (path) {
        str += `;path=${path}`      
    }
    document.cookie = str
}

修改cookie

重新存一下把之前的覆盖掉就是修改了cookie了

附

最后附上一个cookie方法，既可以完成存也可以取，甚至可以删

// 通过判断有没有传第二个参数value来决定是存还是取
// 这个方法也可以用域删cookie，比如：cookie('username', '', { expires: -1, path: '/' })
function cookie (key, value, options) {
    if (value) {
        var str = `${key}=${encodeURIComponent(value)}`



本人从事网路安全工作12年，曾在2个大厂工作过，安全服务、售后服务、售前、攻防比赛、安全讲师、销售经理等职位都做过，对这个行业了解比较全面。


最近遍览了各种网络安全类的文章，内容参差不齐，其中不伐有大佬倾力教学，也有各种不良机构浑水摸鱼，在收到几条私信，发现大家对一套完整的系统的网络安全从学习路线到学习资料，甚至是工具有着不小的需求。


最后，我将这部分内容融会贯通成了一套282G的网络安全资料包，所有类目条理清晰，知识点层层递进，需要的小伙伴可以点击下方小卡片领取哦！下面就开始进入正题，如何从一个萌新一步一步进入网络安全行业。


![](https://img-blog.csdnimg.cn/img_convert/311903982dea1d8a5d2c98fc271b5b41.jpeg)



### 学习路线图


 其中最为瞩目也是最为基础的就是网络安全学习路线图，这里我给大家分享一份打磨了3个月，已经更新到4.0版本的网络安全学习路线图。


相比起繁琐的文字，还是生动的视频教程更加适合零基础的同学们学习，这里也是整理了一份与上述学习路线一一对应的网络安全视频教程。


![](https://img-blog.csdnimg.cn/img_convert/1ddfaf7dc5879b1120e31fafa1ad4dc7.jpeg)


#### 网络安全工具箱


当然，当你入门之后，仅仅是视频教程已经不能满足你的需求了，你肯定需要学习各种工具的使用以及大量的实战项目，这里也分享一份**我自己整理的网络安全入门工具以及使用教程和实战。**


![](https://img-blog.csdnimg.cn/img_convert/bcd1787ce996787388468bb227d8f959.jpeg)


#### 项目实战


最后就是项目实战，这里带来的是**SRC资料&HW资料**，毕竟实战是检验真理的唯一标准嘛~


![](https://img-blog.csdnimg.cn/img_convert/35fc46df24091ce3c9a5032a9919b755.jpeg)


#### 面试题


归根结底，我们的最终目的都是为了就业，所以这份结合了多位朋友的亲身经验打磨的面试题合集你绝对不能错过！

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.youkuaiyun.com/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**