这次我们聊一下Cookie

aaron 发布于2019-08-16 16:11 / 604人阅读

摘要：针对这个存储信息大小，还是做了一些限制的。关于限制客户端去访问的问题，这样做的目的就是为了保证安全。当我们的网页遭受了攻击，有一段恶意的脚本插到了网页中。但同样要注意，和同样需要和之前的保持一致。

会话跟踪技术用来跟踪用户的整个会话，会话就是用户在登录网站后的一系列动作，常用的是Cookie和Session，两者的唯一区别是前者在浏览器记录信息，后者在服务器。今天只是简单的说下Cookie，知道的就算看个热闹，不知道的希望能帮到你。

以上图片是我抓包得来，从上面的图片可以看出，cookie中的值是key-value格式的，而且是通过一个分号和空格来间隔的。

cookie的流程是：服务器设置cookie---通过response将cookie传到前端保存在浏览器中---前端访问后端接口时在request header中自动添加上cookie---服务端接收到cookie做一些业务操作。

那么cookie是怎么工作的呢？首先cookie对于浏览器来说只是一个纯文本，浏览器的安装目录下是会有一个专门的文件夹用来保存各个网站的cookie。当从前端发送请求到后端的时候，浏览器会自动的检测下是否有cookie，如果有就会添加到请求的头信息中，以上是浏览器自动帮我们做的。

存储到cookie中的数据，浏览器会自动的放在http请求中，只有是每次请求都必须要发送给服务器的数据才会放到cookie，比如身份验证信息。如果是不必要的，必然会增加网络开销。针对这个存储信息大小，cookie还是做了一些限制的。每个域名下的cookie 的大小最大为4KB，每个域名下的cookie数量最多为20个（但很多浏览器厂商在具体实现时支持大于20个）。

cookie的属性包括：过期时间；域名、路径等等，这些可以自己设置，如果不手动设置就会使用cookie的默认设置。

expires

过期时间，expires必须是 GMT 格式的时间（可以通过new Date().toGMTString()或者 new Date().toUTCString() 来获得）。

如果没有设置的话，那么默认的有效期就是session，就是会话cookie，这种会在浏览器关掉的时候就没有了。

domain和path

domain是域名，path是路径，两者组合起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。

就是说在访问这个域名或者是该域名的子域名下，目录是在该目录或者是在该目录下的子目录下的时候，浏览器会自动把cookie放到请求头部中。

如果没有设置这两个选项，则会使用默认值。domain的默认值为设置该cookie的网页所在的域名，path默认值为设置该cookie的网页所在的目录。

两点需要注意：domain可以设置为页面本身的域名，或者是该域名的父域名，比如说，www.sougou.com，可是设置为www.sougou.com，也可以设置为sougou.com。

secure

secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时，包含 secure 选项的 cookie才能被发送至服务器。

默认情况下，cookie不会带secure选项(即为空)。所以默认情况下，不管是HTTPS协议还是HTTP协议的请求，cookie 都会被发送至服务端。但要注意一点，secure选项只是限定了在安全情况下才可以传输给服务端，但并不代表你不能看到这个 cookie。

httpOnly

这个选项用来设置cookie是否能通过 js 去访问。默认情况下，cookie不会带httpOnly选项(即为空)，所以默认情况下，客户端是可以通过js代码去访问（包括读取、修改、删除等）这个cookie的。当cookie带httpOnly选项时，客户端则无法通过js代码去访问操作（包括读取、修改、删除等）这个cookie。

在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。

关于限制客户端去访问cookie的问题，这样做的目的就是为了保证安全。

试想：如果任何 cookie 都能被客户端通过document.cookie获取会发生什么。当我们的网页遭受了 XSS 攻击，有一段恶意的script脚本插到了网页中。这段script脚本做的事情是：通过document.cookie读取了用户身份验证相关的 cookie，并将这些 cookie 发送到了攻击者的服务器。攻击者轻而易举就拿到了用户身份验证信息，于是就可以利用此用户信息访问目标服务器（因为攻击者有合法的用户身份验证信息，所以会通过你服务器的验证）。

下面的这段是从项目中找到的一段关于设置cookie的代码：

public void addCookie(HttpServletResponse response, String cookieValue) {
       if (this.cookieDomain == null) {
           throw new IllegalArgumentException("cookies domain is not null");
       } else {
           Cookie cookie = new Cookie(this.coookieName, cookieValue);
           cookie.setPath(this.cookiePath);
           if (this.cookieDomain != null) {
               cookie.setDomain(this.cookieDomain);
           }

           if (this.cookieMaxAge != null) {
               cookie.setMaxAge(this.cookieMaxAge);
           }

           if (this.cookieSecure) {
               cookie.setSecure(true);
           }

           if (this.cookieHttpOnly) {
               cookie.setHttpOnly(true);
           }

           response.addCookie(cookie);
       }
   }

什么时候 cookie 会被覆盖：cookie中的name、domain、path 这3个字段数值都相同的时候。

如果显式设置了 domain，则设置成什么，浏览器就存成什么；但如果没有显式设置，则浏览器会自动取 url 的 host 作为 domain 值；

修改 cookie。

要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path、domain这两个字段一定要和之前保持一样。否则是不会确定为之前的cookie，而是添加了一个新的cookie。

删除 cookie

删除一个cookie 也是一样的，也是重新赋值，只要将这个新cookie的expires选项设置为一个过去的时间点或者是直接赋值为0就行了。但同样要注意，path和domain同样需要和之前的cookie保持一致。

在开发的过程中，用户的登录态是大部分是放到cookie里，因为cookie自己有着完整的一套配置，包括上文讲到的各种属性和安全问题，总体来说还是比较方便的。

东西不多，也很简单，希望每个读者都能完全消化。

这样的分享会一直持续，你的关注、转发和点赞是对我最大的支持，感谢。

idc机房托管专线服务群聊头像新浪视频聊刘望舒聊群聊搜索框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/73956.html

【前端工程师手册】总结一下前端存储

摘要：如果不指定，默认为当前文档的主机不包含子域名。标识指定了主机下的哪些路径可以接受该路径必须存在于请求中。具体的使用参考教程和类似，但是可以直接使用来操作，具体的参看参考聊一聊前端存储那些事儿聊一聊 cookie 为什么会有cookie http协议的无状态，所谓无状态即是服务器并不是知道这次的请求和上次的请求是不是同一个client发来的，就好比你经常去一家超市买东西，老板并不记得你是...

array_huang 2019-08-26 12:09 评论0 收藏0
[聊一聊系列]聊一聊前端存储那些事儿

摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...

caige 2019-08-19 18:46 评论0 收藏0
[聊一聊系列]聊一聊前端存储那些事儿

摘要：如图图顾名思义，，是级别的存储。如笔者写的一篇浅析文章聊一聊百度移动端首页前端速度那些事儿读者们可以尝试使用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/frontenddriver 在web开发越来越复杂的今天，前端拥有的能力也越来越多。其中最重要的一项莫过于web存储。...

lastSeries 2019-08-02 18:51 评论0 收藏0
[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

摘要：要快，但是我们的服务也必须万无一失，后续我会分享百度移动端首页的前端架构设计那么这样的优化，是如何做到的呢，又如何兼顾稳定性，架构性，与速度呢别急，让我们把这些优化一一道来。百度移动端首页的很多就是这样缓存在客户端的。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fronte...

The question 2019-06-24 17:50 评论0 收藏0
[聊一聊系列]聊一聊WEB前端安全那些事儿

摘要：所以今天，就和大家一起聊一聊前端的安全那些事儿。我们就聊一聊前端工程师们需要注意的那些安全知识。殊不知，这不仅仅是违反了的标准而已，也同样会被黑客所利用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog... 随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求...

AZmake 2019-06-21 16:29 评论0 收藏0