Cookie与前端安全

目录

一、Cookie的作用

二、cookie与http协议

1. http响应——cookie的生成

2. http请求——cookie的发送

三、Cookie的属性

1. Expires，Max-Age

2. Domain，Path

3. Secure，HttpOnly

4. SameSite

四、安全

1. csrf攻击

2. xss攻击

五、其他

---

一、Cookie的作用

1. 介绍

        因为http请求是无状态的，不会记忆之前的信息，前后两次请求是没有关系的。而有些请求需要记录状态，就需要通过Cookie携带信息发送到服务器，从而返回不一样的回应。

        cookie是服务器保存在浏览器的一块文本信息，浏览器每次向服务器发出请求，就会自动附带这段信息。

2. 作用

        cookie用来区分用户、存储用户访问网站的一些信息，使用场景如下：

• 保存登录状态、购物车、记住密码下次自动登录等功能。  
• 个性化信息：保存用户的偏好，比如网页的字体大小、背景色等。
• 记录用户浏览器数据，进行商品推荐。

二、cookie与http协议

1. http响应——cookie的生成

// 该代码会在浏览器保存一个名为foo的cookie，值为bar
Set-Cookie:foo=bar

 （1）如果服务器想在浏览器保存cookie，就要在http响应的头部，放入Set-Cookie字段。http响应可以包含多个Set-Cookie字段，每个Set-Cookie字段也可以包含cookie的多个属性。

// 原信息
Set-Cookie：key1=value1; domain=abc.com; path=/blog
// 修改信息
Set-Cookie：key1=value2; domain=abc.com; path=/blog

（2）如果服务器想改变之前设置的Cookie，必须同时满足4个条件：Cookie的key、domain、path和secure都匹配（不是相等）。

2. http请求——cookie的发送

// 向服务器发送名为foo的cookie,值为bar
Cookie:foo=bar

 （1）浏览器向服务器发送http请求时，要在http请求的头部，设置Cookie字段，从而带上相应的Cookie（也就是把之前保存的信息再发送回去）。Cookie字段可以包含多个Cookie。

（2）服务器收到cookie时，有两点是无法知道的：

• Cookie的各种属性
• 哪个域名设置的Cookie，到底是一级域名还是二级域名设置的。

三、Cookie的属性

1. Expires，Max-Age

Expires：具体的到期时间。过期后，浏览器就不再保留这个cookie。

Max-Age：从现在开始cookie存在的秒数，优先级高于Expires。

不设置/null：cookie只在当前会话存在，浏览器窗口关闭后，当前session结束，cookie就被删除。

2. Domain，Path

（1）Domain：指定cookie属于哪个域名。以后浏览器向服务器发送请求时，通过该属性判断是否要携带cookie。默认为当前域名。

（2）Domian属性的规则：Domain属性只能是当前域名或当前域名的上级域名，且不能是顶级域名或公共域名，否则浏览器会拒绝设置该cookie。----浏览器发送cookie时，Domain属性必须是当前域名或其上级域名。

（3）Path：指定浏览器发送http请求时，哪些路径要附带这个cookie。只要Path属性是请求路径的开头一部分，就会在头信息中带上这个cookie。（前提是Domain符合条件）

3. Secure，HttpOnly

（1）Secure：指定浏览器只有在https协议下（当设置为true时），才能将cookie发送到服务器。如果当前协议是http，则会忽略secure属性。

（2）HttpOnly：指定该cookie无法通过JS脚本拿到，例如document.cookie、XMLHttpRequest对象都拿不到该属性，只有浏览器发送http请求时才会带上该cookie。可以防止xss攻击，不让cookie被脚本读到。

4. SameSite

（1）用来防止用户追踪和防止csrf攻击。

（2）第三方cookie：由第三方网站引导而附带发送的cookie。它不仅会导致csrf攻击，还能用于用户追踪（facebook网站在第三方网站插入一张图片，当浏览器执行该部分代码时，就会向facebook发送带cookie的请求，从而让facebook知道了你是谁，访问了什么网站）。

（3）可以设置的3个值，来限制第三方cookie。

• Strict：禁止第三方cookie。跨站点时，任何情况下都不会发送cookie。
• Lax：大多情况下也是禁止第三方cookie，但是导航到目标网站的get请求（包含链接、get表单等）除外。默认值
• None：关闭SameSite属性，前提是同时设置secure属性，否则无效。

四、安全

1. csrf攻击

        csrf攻击---跨站请求伪造：恶意网站伪造了带有正确cookie的http请求。

        举例：用户登录微博www.weibo.com后，微博服务器会发送一个cookie，用户后来又访问了恶意网站，网站中有www.weibo.com/api（子作用域），那么当用户访问该连接时，微博服务器就会收到带有正确cookie的请求，服务器就会认为是本人在操作，从而导致账号被劫持。

        防御措施：

        （1）设置SameSite：Strict或Lax都可以，让cookie不随第三方网站发出。

        （2）验证token：浏览器发起请求后，服务器会返回一个token。之后每次请求都要同时带上token和cookie才会被认为是合法请求。

2. xss攻击

        xss攻击——跨站脚本攻击：注入恶意script代码到网页中，当用户浏览该页面时，就会执行这些script代码，从而实现恶意攻击。

        常见的有3种类型：

        （1）存储型（持久）：恶意代码存储在目标服务器上，当浏览器发送请求时，该恶意代码会随响应报文传回并解析执行。【与反射型的区别在于提交代码是否会存储在服务端】

        场景：用户评论区，提交包含一条恶意代码的评论到数据库，其他用户看到该评论时，恶意代码会随响应报文返回，浏览器解析xss代码。

        （2）反射型（非持久）：恶意代码出现在url中，当发请求时会作为输入提交到服务端，然后该恶意代码随响应报文一起传给浏览器，最后浏览器会解析执行该恶意代码。

        （3）DOM型：不经过服务端，通过修改dom节点，把恶意代码插入到了页面。【与后两者的区别在于不经过服务端】

        DOM型属于JS自身的安全漏洞，前两种属于服务端的安全漏洞。

        防御措施：

        （1）HttpOnly：许多xss攻击目标是为了窃取用户cookie，设置httpOnly可以防止JS获取cookie。

        （2）输入检查：对输入内容的<script>等标签进行转义或过滤，转义<>&等字符。

五、其他

1. window.navigator.cookieEnabled：布尔值，表示浏览器是否打开cookie这个功能。

2. document.cookie：返回当前网页的所有cookie（该cookie没有httpOnly属性）。

3. 一般，对于单个域名来说，设置的cookie不应超过30个，每个cookie大小不能超过4KB，超过之后，cookie会被忽略。

4. 区分cookie时不考虑协议和端口。

http://abc.com
https://abc.com
http://abc.com:8080
这3个域名的cookie通用

5. 哪些请求会携带cookie

        浏览器访问某个路径之前，就会找出对该域名domain和路径path有效，并且还没有到期的cookie，一起发送给服务器。

6. 域名

1. 根域名 .
2. 顶级域名（一级域名）
        ·按国家划分：.cn中国，.hk香港
        ·按组织性质划分：.com   .org    .net等
    所有baidu.com是一级域名

3. 二级域名（2个点）
    .baidu.com，.zhihu.com
    www.baidu.com