cookie
cookie的出现主要是解决http是无保存状态的协议带来的弊端。
cookie原理:
cookie可以通过服务端进行设置,也可以在前端自行设置cookie. 服务端设置cookie时,会将cookie放入到响应请求中,如果要设置多个cookie值时,需要多次Set-Cookie. 设置好的cookie信息会在发送http请求的时候在请求头中携带上Cookie,服务端可以直接从中获取到想要拿到的值,也可以修改cookie的内容。由于cookie会在http请求时携带,所以不能滥用cookie。
cookie属性:
浏览器右键-检查-cookie-选择一个域名下的cookie进行查看即可出现上图。有图可看出,cookie 拥有多个属性,接下来主要介绍一下常用的属性。
name,value
一个域名下绑定的cookie, 当path相同时,name值是不可以重复的。相同的name设置的值会被覆盖掉。一个name对应一个value值。
domain
domain指的就是当前cookie所在域名。如果我们设置cookie的时候不对其进行设置,就会自动绑定到执行语句的当前域。同一域名下的cookie客户端和服务端可以进行共享。一个浏览器窗口下可以设置多个不同域名的cookie。
path
path在我们不指定的时候,默认是当前web页面的路由。 如果当前路由是/,path='/';如果当前路由是/post, path='/post'; 同一域名下,如果path不同,可以指定同name的多个cookie。
Expires / Max-Age
cookie是有有效期的。cookie本身不存在删除,当到达有效期时间的时候,cookie会被浏览器从磁盘删除。
1、当Expires被设置为未来的某个时间节点,或是Max-Age被设置为正数时,会被浏览器自动转化为未来的某个时间进行存储。此时cookie会被存储到我们的磁盘上,当在有效期范围内时,再次打开浏览器时,浏览器会自动去读取我们的磁盘来获取到可用的cookie。
2、当Expires没有设置或是Max-Age被设置为负数时,表示临时存储,并不会为我们生成cookie文件,此时的cookie会被存储在我们的浏览器内存中,且只会在打开的浏览器窗口或者子窗口有效,一旦浏览器关闭,cookie就会释放。
3、当Max-Age被设置为0时, 证明cookie失效。失效的cookie会自动从内存中删除。
4、Expires和Max-Age设置其一就可以了。当然现在的趋势是使用Max-Age来代替Expires。
secure
当这个值被设置为true时,表示cookie只会在https和ssl等安全协议下进行传输。
HttpOnly
当这个值被设置为true时,就不能够通过js来获取和操作cookie的值。这个值就只用于在http中做传输,可以有效的防止xss攻击。
sameSite
这个属性主要是通过限制第三方cookie来防止CSRF攻击和用户追踪。目前各大浏览器均已支持此属性,并且默认值为Lax.
1、Strict: 完全禁止第三方cookie,跨站点时,任何情况都不允许发送cookie。
2、Lax: 大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外。
3、None: 跨站点访问时,可以携带cookie
cookie使用注意事项
cookie的诞生主要是解决http无状态的弊端,主要是在http请求中携带。所以cookie主要存储一些服务端需要的值。 对于前端存取一个全局变量但是对服务端没有什么用时,不建议使用cookie。 可以根据需要采用浏览器的其他存储,例如sessionStorage、localStorage等方式。