什么是cookie？记住这几个点使用更安全！

我为什么开始折腾这玩意儿？

那阵子我在家，帮张三弄他那个屁大的个人博客。他天天跟我抱怨，说他老是掉线，而且有次密码都被人改了。我跑去看，盯着他的后台代码看了半天，发现他那个登录态，就是靠浏览器里存的那个小玩意儿——Cookie来认人的。说白了，这玩意儿就是服务器塞给浏览器的一个身份牌。你下次再来，浏览器就把这个身份牌甩回去，服务器就知道你是谁了。

我打开我的测试环境，试着自己写了一个最简单的登录流程，用一个最普通的Cookie来记着我。我一看，咦，好像也没啥复杂的。可张三那个被盗号的事情一直在我脑子里转悠，搞得我头大。我总觉得这简单背后肯定藏着什么大坑，于是我决定从头到尾把它扒开看看。

我怎么实践并找到了问题所在

我搞了一个叫做抓包的小工具。我登录上去，然后盯着这个工具看。我的妈呀，那个Cookie的内容，我的用户名、ID，全都清清楚楚地写在传输的路上。任何人只要能插上一脚，就能把这个身份牌偷走，然后冒充我。这种裸奔的状态，真是吓了我一跳。

紧我又在控制台试了试，用前端的那个小脚本（就是JS）去读那个Cookie。果然！一下子就读出来了。这意味着什么？如果我在一个网站不小心点到了一个坏蛋的链接，那个坏蛋就能用他偷偷运行的JS代码，悄无声息地把我浏览器里的身份牌给偷走，然后拿去登录我的账户。

这真是太危险了！我意识到，我必须给这个身份牌加几把锁，不能让它随便被人拿走。我又跑去查了一堆资料，翻了几个牛人的博客，总算找到了三个几乎可以一劳永逸的安全开关。我决定一个一个地试，把这个过程完完整整地记录下来。

记住这三个安全开关，让Cookie老实点！

我动手改了我的测试代码，主要就是在设置Cookie的时候，多加了几个属性。我把这三个点全部塞了进去，然后重新测试了一遍。效果立竿见影！

• 第一个开关：HttpOnly

我加上了这玩意儿。它干啥用？简单讲，就是不让客户端的脚本（比如前端JS）随便乱动这个Cookie。之前，坏人能用JS代码偷偷摸摸地读走它。现在加上这个，JS就彻底瞎了。我在控制台试着用那个JS命令去读，果然！读不到了，它被保护起来了。

• 第二个开关：Secure

我立马加上了。这个更简单粗暴。它强制要求这个Cookie只能在安全通道（就是那个带's'的那个协议）里传输。如果是非安全通道，浏览器直接就拒绝发送。我把我的测试环境改成非安全模式试了一下，Cookie真的消失了！这保证了传输过程的安全。


• 第三个开关：SameSite

这个是最重要的一个。它管着你的Cookie会不会被第三方网站带走。以前，你开了一个A网站，它设置了一个Cookie。然后你又点进去了一个B网站，B网站里面偷偷放了个请求到A网站，A网站的Cookie就屁颠屁颠地跟着过去了。我设置成了'Strict'，搞定之后，我从另一个网站模拟请求，再看，我的Cookie老老实实地待在原地，没有被带走！这简直是防跨站攻击的神兵利器！

最终的实现效果

我把这三个点教给张三，他把代码改了之后，立马感觉安全多了。我再次用那个抓包工具看，在传输路上看不到那些关键信息了，而且前端的脚本也拿不到它了。这让我长舒了一口气。虽然只是一个小小的Cookie，但它掌握着你的身份，所以一定要给它穿上厚厚的盔甲！记住了这三个属性，你的网站立马安全了一大截！