4202年了，还有传统天命前端人在博客上搜索:什么是cookie？cookie和token有何区别？set-cookie的各种属性有何作用？cookie到底能不能跨域？什么是csrf和xss攻击，如何防范？set-cookie里的SameSite有什么作用？跨站和跨域有什么区别？
不必了不必了，小小一个cookie而已，看完这篇文章，65岁退休程序员我也包你全会哒！
（ps：本文主要用于欺骗帮助前端萌新理解cookie，大佬以及后端同学可当段子食用选择性食用）
1. cookie的概念
cookie其实是网络服务器为了记录你的网络行为而存在你电脑上的一个小小文件。
当用户发起请求时，由后端同学在响应头里用set-cookie设置cookie，cookie以key-value的形式存在，在chrome浏览器上，我们可以通过f12 唤醒的devTools的application页，看到该网页下存储的cookie。
比如下图就是bing所存储的所有cookie，之后你再发起请求，每个请求都会自动带上所有的cookie，这对前端同学来说，基本是无感的，但是后端同学可以通过cookie来验证用户身份。
说人话：假如你叫网页，你到一个叫服务器的商店买东西，老板慈悲为怀，给了你东西还给了你三张贵宾卡，一张黑卡一张白金卡一张黄金卡，和你说：见卡如见人！下次再来我就认识你是我们的大贵宾了！你把三张贵宾卡别在你买的一件叫devtools-application的衣服上，以后每次人未到先见卡，因为卡就在衣服上，去哪儿都得全带着
那么朋友们，问题来了，假设这个商店是个奢侈的高级的洗浴中心，你存了三瓶人头马，还放了八百万现金，现在别人穿了你的衣服，衣服上别着三张贵宾卡。。。
别怕别怕，你没有人头马，也没有八百万。
2. cookie的特点
别害怕，我们先来分析一下贵宾卡cookie的特点，再慢慢想如何保住你的钱
- 数量有限制，50条左右
- 大小有限制，4k左右（左右由各个浏览器控制，不同浏览器可能有所不同）
- 有域名限制，一般而言cookie不可跨域，后面讨论二般情况
- 有过期时间，由后端的set-cookie来决定
- 每次请求都会带上所有的cookie，无论服务器是否需要
说人话：
- 商店不能一直给你发贵宾卡，50张到头了。
- 一张卡能有多大？4k够够的。
- 你还想把水果摊的贵宾卡用到洗脚城？
- 王总，好长时间不来了，你贵宾卡都过期了！
- 贵宾卡挂满衣服，管他用没有用，要的就是一个排面！
3. 密语口令Token
相信经过上面的了解，你还是没懂到底如何保住你的钱，但是没关系，洗浴中心给你想好了，诶对，就是口令，俗称对黑话，Token
Token，又称令牌，是一种用于身份验证的方式。在前后端分离的应用中，当用户登录后，后端会生成一个Token字符串，然后将其返回给前端。前端可以将该Token保存在客户端，例如浏览器的Cookie或LocalStorage中，以便在需要访问后端API时，将该Token发送给后端进行身份验证。后端在验证Token的有效性后，会根据Token所代表的用户身份等信息，返回相应的数据或执行相应的操作。此处引用来自： blog.csdn.net/weixin_4625…
于前端同学而言，cookie在设置之后，所有的cookie即可自动跟随每个请求一起送出，由后端同学识别哪些是需要的信息。而token则需要手动用sessionStorage、localStorage存储，并在每次请求的时候从两种本地存储中取出来，放入请求的参数或者请求头header中一起送出，再由后端同学到指定位置获取。
同学们想要详细理解token可戳进上文的链接，想听说人话环节的留下
说人话：洗浴中心为了防止别人穿了你带贵宾卡的衣服冒充你，在你上一次来的时候告诉了你一句暗号：天王盖地虎，并且让你别告诉其他人，之后每次呼叫服务员呼叫前台都带上这句暗号，那他们就会知道：这是王总，是我们这儿的大贵宾。
你觉得这个中心考虑的真是周到，人员之间的对话也如此富有神秘感，最重要的是，你的酒和钱都保住了。。。如果你不把你的口令告诉你的"好兄弟"的话
4. XSS和CSRF攻击
XSS 全称为Cross Site Scripting，即跨站脚本攻击,他分为
- 反射型
- 存储型
- 基于DOM型
Xss的本质是向用户页面注入脚本，用js控制页面进行各种类型弹框、偷取数据、盗用Cookie等等操作，其中危害较大的就是盗用用户cookie
Csrf全称为Cross-Site Request Forgery，即跨站请求伪造
Csrf的本质是冒充用户进行操作，通常会通过一个图片或者链接并诱导用户去点击，当用户点击这个图片或者链接后，这个链接通常包含了一些攻击性的操作和参数，即所谓的伪造的请求，就会以用户的身份向服务器发起这个伪造的请求，服务器收到这个伪造的请求后，就会认为是用户自己许可的操作，导致用户数据丢失、财产转移等等
以上参考来自segmentfault.com/a/119000002… 想要了解具体Csrf和Xss攻击的详细情况（分类、危害、场景、防御）的同学，可戳进去阅读
天命前端人，相信上面的话你已经看了无数遍，也为了面试在嘴里念了好几次的经，但始终都有一种陌生感，现在，让我们抛开一切，听听金蝉子的说人话环节吧。
说人话：首先我们来看看Csrf，相信认真阅读完第一节的同学已经知道：Csrf更像一个技术高超的骗子，他会穿上你带满贵宾卡的衣服，到你常去的洗浴中心，喝你的8+1，花你的钱。而Xss则是一个为所欲为的江洋大盗，他在洗浴中心为所欲为所欲为的同时抢了你的贵宾卡，见卡如见人，洗浴中心明知道他是个强盗，但是抢了你的卡要拿你的钱那也只能捏着鼻子认了。
以上环节均发生在无token情况下，需要注意的是，token并不主要预防Xss攻击，只是针对Xss攻击盗用Cookie这种情况有效。
在很长一段时间里，cookie作为前端本地存储的最重要手段，面临着很多的挑战和危险，在token顶起半边天之时，cookie自身也推出了不少的自救手段。
5. 总结
-
本文介绍了cookie的概念：存储在客户端本地，用来记录用户数据和行为的片段。说明了cookie存储时以及使用时的特点：4k、上限50、有域名限制、有过期时间、每次请求全部携带。介绍了token以及token如何解决cookie遗留的问题。最后对比了Xss和Csrf攻击发生的不同情况。
-
本来是想写一篇关于set-cookie各类属性介绍的文章，但是写到一半感觉很枯燥，并没有太大的意思，所以有了这篇文章帮助萌新选手从头到尾对cookie有一个整体的把握，详细点写的很少，可自查或点击文中链接。
-
下篇将主要围绕set-cookie的各种属性介绍cookie如何"自救",值得单开，新手写文章，如有错误，请评论区大佬帮忙纠正一下，感谢。
