【安全】 Cookie

后面会把前端进阶的课程内容都总结一遍。有些都是很常见的知识,但是为了梳理自己的知识树,所以尽量模糊的地方都会记录

笔记列表在公众号右下角

今天就来完整总结一下我们的只是盲点 Cookie,摸摸良心问自己,当别人问你 Cookie 是什么的时候,你真的能很自信地回答出来吗?真的能说的很好吗?

如果你可以的话,就算了哈哈哈

如果你不可以,这才对嘛,这就是我们这篇文章记录的目的了

目的也是完善我们的知识体系,巩固每一个知识点。不要觉得好像简单就忽略,觉得麻烦就不愿意深挖

下面分四块来总结 cookie

1、Cookie 简介

2、Cookie 属性组成

3、Cookie 操作

4、Cookie 的前后端配合

Cookie简介

Cookie 是本地存储的一些数据,存储在本地电脑的文本文件中

Cookie 是后端生成,随着响应发送给浏览器,然后浏览器保存起来。紧接着每次浏览器和该服务器交互都会携带这个 Cookie

Cookie 常用于存储 web 页面的用户信息。因为 http 协议是无状态的,所以无法确定各个访问用户的身份。但是在实际中,必须要确定用户的信息,所以 cookie 就成了 前后端确定用户登录的指标

Cookie 也可以用于记录一些用户操作的信息。比如说用户点击了哪个 tab,用户关闭又打开之后,你可以直接跳到那个 tab,方便用户操作。

Cookie 每个域名下有数量限制(不同浏览器下不一样),并且每个 Cookie 又有大小限制,大约为 4KB,注意是每个 Cookie 容量为 4KB,不是指 所有Cookie 加起来为 4KB,所以 Cookie 通常指存储一些小量信息

Cookie组成

下面我们就来记录一下 Cookie 是由哪些东西组成的!

我们先去浏览器中截个图

你看到这个域名下,有很多个Cookie,其中每个Cookie 又有很多东西组成

打印出这个域名下的 Cookie

咦,怎么是所有 cookie 都拼成一个字符串了,而且只有 name 和 value 属性显示出来

没错!当你获取 cookie 的时候,把 所有的 cookie,按照 键值对,key=value 组成,每个键值对之间由一个分号和一个空格隔开

如下两个 cookie的间隔,有一个 ; 和 一个 空格

而且不会显示其他隐性属性,但是设置新的 cookie 的时候可以设置 这些隐性属性

下面就来说一下所有的属性都是什么东西,按照 Network 的顺序来看,有十个属性,客官慢慢品~

1Name

每一个 cookie 都必须有一个名字,这样才好区分各个cookie,所有这个属性就表示 cookie 的名字

2Value

每一个 cookie 的值,这就是 存储数据的地方,所有存进 cookie 中的数据都放在这个属性里面

name 和 value 是 cookie 的两个主要属性,也是暴露属性,供外部获取,可以通过 document.cookie 拿到

下面就来看一下 cookie 的隐性属性,他们都无法通过 document.cookie 获取

3Domain

设置 Cookie 在哪个域名下可用,所以 Cookie 是不能跨域的。

不能设置成接口外的其他域名

比如说你在域名是 a.com 页面下增加一个cookie,设置domain 为 b.com,那么这个 cookie 是无效的,无法添加

父子域名间访问

二级域名下的 cookie,二级域名以上的网站都可以访问

几个三级域名下的 cookie,是不能相互访问的

什么是二级域名?

.com 是顶级域名、一级域名

baidu.com 是 二级域名

t.baidu.com 是 三级域名

d.t.badiu.com 是 四级域名

也就是说

baidu.com 下有一个 cookie

a.baidu.com , b.baidu.com , c.b.a.baidu.com 都可以获取到这个 cookie

而 a.baidu.com 下的 cookie,b.baidu.com 无法获取到

有点绕,自己理一下不难理解

总的来说

子域名 能 获取到 父域名 下的 cookie

父域名 不能 获取到 子域名 下的 cookie

兄弟级别的域名 不能 相互获取对方 cookie

4Path

设置 cookie 在哪个路径下可用,跟 domain 合成 限制二人组

比如说,如果设置 cookie 只在a.com/course 下生效,就必须设置 path 为 /course

如果不设置,默认就是当前路径,比如说你在 a.com/a/b 下设置 cookie,那么 path 默认就是 /a/b

如果你想整站通用,就设置为 /,表示根目录,该域名下整站通用

5Expires

表示Cookie 的 过期时间,值是一个绝对时间,而且必须是 GMT 格式的时间

什么是 GMT 格式?

就是格林尼治时间,反正通过 new Date 就能拿到了,如下

什么是绝对时间?

就是一个确定的日期时间,比如 2017-09-09,但是是格林尼治时间才可以,如上的截图

如果 expires 设置一个过去的时间,这个 cookie 会马上删掉,差不多就是做一个 然并卵的操作

如果没有设置 expires ,那么默认有效期 是 session,关闭浏览器,cookie 就失效

6Max-Age

和 expires 作用一样,不过这个值的类型是过期的秒数

就是说,你设置了 1000秒,那么在 设置 cookie 1000秒之后,cookie 就会过期

但是这个属性有兼容性问题,ie6,7,8 不支持

7Size

表示这个 cookie 的大小,这里的单位是字节,如下

29 表示29 字节,4095 表示 4095 字节,一个字节就是 1B,所以 4095 字节 也就是约 4 KB

这里的 Size 指的是 name 和 value 加起来 的大小

但是 cookie 的大小 是指 name 和 value 和 等号= 三个加起来

而 一个等号(=) 大小是 1字节

所以通常 Size 的显示 ,是 每个cookie 最大限制减1

比如 火狐 限制每个cookie 最大为 4097 个字节,那么 Size 最多显示为 4096

比如 谷歌 限制每个 cookie 最大为 4096 个字节,那么 Size 最多显示为 4095

关于字节的更多内容可以看这篇文章

【计算机基础】utf6、utf16、utf32

8HTTPOnly

让这个 cookie 不能通过 js 的 document.cookie 获取到。js 无法设置这个属性,只能通过后台来设置

默认情况下,cookie 是不会带 httponly 选项的,也就是为空

9Secure

设置 cookie 只有在https 协议的请求下才发送 cookie,也即是 http 的请求是不会携带 cookie 的

10SameSite

这个的作用是防御 CSRF,但是只有 Google浏览器 存在这个属性

(更多 CSRF 内容,可以看 【安全】CSRF

简单说就是,禁止跨站请求发送cookie

SameSite ,顾名思义就是相同域名,就是,页面发送请求,只有这个请求和页面是同域,那么这个请求才会带上本域名的 cookie,否则不会

举栗子

你已经登录了 b.com,浏览器保存了 b.com 的cookie,当你在 b.com 这个页面下发送 b.com/xxxxx 的请求,都会带上保存的 cookie

如果cookie 没有设置SameSite

你在 a.com 的页面下发送 b.com/xxxx 的请求,这个请求也会带上 b.com 的 cookie,所以会造成 CSRF

如果 cookie 设置了SameSite

那么 a.com 页面下发送 b.com/xxx 的请求,就不会再带上 b.com 的 cookie

不同值不同作用

实际上,SameSite 可以设置不同的值来实现不同的效果,而不是一股脑禁止发送 cookie

SameSite 设置为Strict,就是严格模式,完全禁止跨站发送cookie

SameSite 设置为 Lax,就是宽松模式,如果是 get 请求,可以跨站发送cookie,如果是 post 请求,则不允许跨站发送 cookie

为什么不完全禁止跨站发送cookie?

真的无法禁止,最实际的例子就是,淘宝。

你登陆了淘宝,浏览器保存了 taobao.com 的 cookie

当你从百度或者其他页面点进淘宝的链接进来,此时请求淘宝页面的这个请求不会带上之前你登陆的 cookie,那么你进入淘宝的时候,就是无登录状态,你又要重新登陆,你不是奔溃了??

因为禁止跨站发送cookie 之后,baidu.com 打开 taobao.com ,发送了 taobao.com 的请求,就是跨站了,当然不会带上原来淘宝的 cookie,所以登陆无法统一

Cookie操作

上面讲了那么多 cookie 的属性,现在我们需要来了解 cookie 是怎么操作的

比如说,cookie 如何添加,如何 更新,如何删除

1获取Cookie

应该都知道怎么去获取 cookie 了,就是通过 document.cookie 获取

2添加Cookie

比如要设置一个 名字是 a ,值是 b 的 cookie,操作如下

document.cookie = "a=b"

会不会想,这么做会不会覆盖掉以前的 cookie?

答案是不会,那么这个操作后会发生什么事情?

自动拼接在 原来的 cookie 后面,就是这么神奇

添加其他属性

添加其他属性,expires 之类的时候,需要用 ; 号 隔开,如下

document.cookie = "username=cover"+ ";domain=a.com" + ";expires="+new Date('2018-1-1') + ";secure"

编码

一般我们在添加 cookie 的 时候,需要对 cookie 的 名字和 值 进行编码,主要是为了防止前后端交互时因为乱码而出现错误,比如中文等等

编码使用 JS 内置的方法 encodeURIComponent

然后就这么去操作

document.cookie =
encodeURIComponent ("username")+"=" +encodeURIComponent ('cover')

当然了,拿出来也要记得解码,方法就是 decodeURIComponent

3更新Cookie

更新 Cookie 的 操作 和 添加 Cookie 的操作是一样的

比如之前已经存在一个cookie, 名字是 a ,值是 b ,现在要更新值 为 c,操作如下

document.cookie = "a=c"

看下实操

没错,就是这么简单,如果你要更新其他属性也是可以的,比如你要更新 过期时间 expires

document.cookie= "a=c;expires="+new Date("2019-09-09")

4删除 Cookie

如果你 要删除一个 cookie,直接把 过期时间 expires 设置为 一个过去的时间就可以了,比如是 new Date(0)

比如现在已经存在一个 cookie,我直接更新他的 expires 为过去,然后再获取这个 cookie,就发现为空了,表明已经被删除了

5第三方库 操作 Cookie

是不是发现这么去操作挺麻烦的,我要获取某个cookie 还要手动去截取字符串,删除也是麻烦,所以我们需要封装一个方法去一次性简化我们的操作

但是现在已经有一个现成的 轮子供我们使用了,我们可以拿过来,这个库就是 js-cookie,这个库也很简单,可以看一下源码

地址在这里 https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.js

你看操作起来就十分简单

Cookies.set("name","value",opts) // 添加 cookie

Cookie前后端配合

Cookie 是解决 http 无状态 的一个关键点,利用它实现用户的登录状态,保存用户的信息

实际操作是如下

用户登录之后,服务端返回响应,带上头部

Set-Cookie:id=xxxx

浏览器接收响应,拿到 cookie,保存在浏览器中

在此浏览器发送请求的时候,会自动在请求头部携带上这个 cookie

然后服务端收到请求时,拿到请求携带的 cookie ,就能知道是哪个用户的请求了

最后

鉴于本人能力有限,难免会有疏漏错误的地方,请大家多多包涵, 如果有任何描述不当的地方,欢迎后台联系本人。

本文分享自微信公众号 - 神仙朱(skying-zhu),作者:神仙朱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【安全】XSS 类型

    后面会把前端进阶的课程内容都总结一遍。有些都是很常见的知识,但是为了梳理自己的知识树,所以尽量模糊的地方都会记录

    神仙朱
  • 【安全】CSRF

    后面会把前端进阶的课程内容都总结一遍。有些都是很常见的知识,但是为了梳理自己的知识树,所以尽量模糊的地方都会记录

    神仙朱
  • 【安全】 XSS 防御

    后面会把前端进阶的课程内容都总结一遍。有些都是很常见的知识,但是为了梳理自己的知识树,所以尽量模糊的地方都会记录

    神仙朱
  • session与cookie的区别

    (4)设置cookie时间可以使cookie过期。但是使用session-destory(),我们将会销毁会话。

    葆宁
  • 爬虫cookies详解

    Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。定义于 R...

    星星在线
  • 各浏览器Cookie大小、个数限制

    一、浏览器允许每个域名所包含的cookie数:   Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也...

    小柒2012
  • 【HTTP】浅谈Cookie与Session那些事

    这时候,我们就需要通过cookie来对用户的身份进行标识了,用户每次对服务器发起请求时,都带上自己独有的cookie,服务器通过读取cookie信息,识别用户。

    一名白帽的成长史
  • Cookie 和 Session 的使用简记

    http://mertensming.github.io/2016/10/19/cookie-session/

    bear_fish
  • 怎样用 JavaScript 操作 Cookie[每日前端夜话0xC4]

    Web 服务器和 HTTP 服务器是无状态的,因此当 Web 服务器将网页发送到浏览器时,连接会被断开,服务器会忘记与用户相关的所有内容。

    疯狂的技术宅
  • 为什么你的话题爬虫 topic 文件夹总是空的

    其实程序一运行起来,没有在控制台打印出每一页微博的具体信息,就可以断定你的操作方式出了问题,不必等上十几二十分钟。

    月小水长

扫码关注云+社区

领取腾讯云代金券