远浅的日志空间
理解他人,内省自己

前端与Cookies的爱恨情仇,瞄一眼以免陷入深坑。

作者: 远浅发表于: 2019-11-13 07:16分类: 技术

Cookies是什么

Cookies是一小段文本数据。

由于HTTP是无状态的,所以需要一个标识来追踪用户,Cookies于是应运而生。

Cookies有什么特点

前端时请求时会自动带上本域的合法Cookies,不同的http库可能需要自行加上额外参数。Cookies存在一些特定的属性用于更好的履行它的职责。

  • k/v:一个键值对。
  • domain:指定k/v生效的域名。
  • path: 指定的路径。
  • secure: 是否只允许在https环境下传输。
  • expires:在多久后失效。
  • http-only: 是否禁止脚本操作Cookies

Cookies和前端可能会擦出什么样的火花

同名token坑你没商量

由于cookie只会被当前域名自动携带,所以各个网站都使用token=xxx作为k/v也毫无问题。

随着由于业务的发展,业务开始部署在类似于xxx.domain.com、yyy.domain.com下,一旦某个后端服务set-cookie的时候,把domain写成了.domain.com 和xxx.domain.com,k/v却相同,噩梦就来了。由于前端是自动带上cookies, 现在有多个同名cookies可以被浏览器携带上了,很有可能的情况就是,后端下发了一个合法的cookies,但是浏览器自动携带了一个已经失效的cookies,导致前后端流程走不通。

在我短暂的Nodejs服务端生涯中,我曾经在服务端接收到了两个同名的Cookies,但是一般的cookie parse只会给你解析一个。

webview注入token可失效

前端开发很常见的一个场景就是帮客户端开发内嵌的H5页面,这个时候就需要客户端在webview上传递token。

但是如果客户端没有很好的处理webview跳转时的Cookies问题,在经过2次跳转时,token会注入失败

token的k/v值请注意不要能被Encode编码改变

Cookies是headers上面传递。

服务端下发的Cookies是A,A从浏览器传过来的时候会被urlencode,如果A里存在特殊字符,那么在服务端做校验时无法匹配,业务流程阻断。

前端删除cookies不生效

前端清除Cookies看起来很简单,直接覆盖或者置空就好。但是请注意,如果你没有指定精确的path、domain、k,很有可能你的操作全是骗自己。

某些平台其实是不支持Cookies的

比如微信小程序?

Cookies的的跨域和无法携带的问题

浏览器支持的fetch默认是不携带Cookies的,需要额外设置。

fetch(url, {
credentials: "include"
})

axios跨域携带Cookies需要设置

axios.get('http://happysooner.com', {withCredentials: true})

Cookies是必须的吗

不是的。

用于追踪用户,我们可以自定义其他的Headers属性去追踪。

Cookie属于浏览器内置功能,比较成熟,对于整个系统来说,节约了很多额外的开发时间。

赠人玫瑰, 手有余香。🌹
打赏
发表评论
评论列表
评论努力加载中