http cookie

作为一个前端的程序员,操作cookie也仅仅是document.cookie。对于http cookie一般是server端接口来控制,通过Request Headers和Response Headers可以看到。平时也不胜关心。但是最近项目遇到一个问题,让我对http cookie的发送与设置进行了精分。

http cookie跨域时到底发送哪个域的数据

前提:页面的域名是:web.zmrdlb.com,请求接口的域名是web.zmrdlb.net。(接口已经设置了可以跨域访问,所以页面通过ajax可以访问接口的数据)

tips: 要想跨域可以发送cookie,则先设置ajax对象xhr.withCredentials = true;然后接口的Response Headers添加如下设置:

- 允许跨域一般设置:(这里说到要支持cookie,所以注意有cookie设置)
- Access-Control-Allow-Headers: Origin, Content-Type, Cookie, Accept
- Access-Control-Allow-Methods: GET, POST, PATCH, PUT, OPTIONS
- Access-Control-Allow-Origin: http://web.zmrdlb.com (注意:如果要支持跨域传递cookie,则不能是*,必须是具体的域名)
- cookie跨域设置:
- Access-Control-Allow-Credentials: true
  1. web.zmrdlb.com域名下,设置cookie:

    • key: comname
    • value: zmr
    • domain: zmrdlb.com
    • path: /
    • expires: 2天后
  2. web.zmrdlb.net域名下,设置cookie:

    • key: netname
    • value: dlb
    • domain: web.zmrdlb.net
    • path: /
    • expires: 2天后
  3. 在web.zmrdlb.com域名的页面下,请求web.zmrdlb.net域名下的接口。

Request Headers:

Cookie: netname=dlb;

Response Headers:

Set-Cookie: netsex=man;domain=zmrdlb.net;path=/;httponly
  1. 此时再次请求接口

Request Headers:

Cookie: netname=dlb;netsex=man;

总结

  • http cookie发送的时候,Resquest Headers里面的cookie字段,是你请求的接口所属的域名和路径可以读取到的cookie;
  • 不同子域可以共享二级域名及以上相同父域名的cookie;
  • 特别说明:HTTP-only类型的Cookie不能使用Javascript通过Document.cookie属性来访问,从而能够在一定程度上阻止跨域脚本攻击(XSS)。但是document.cookie设置的cookie(所请求的接口可以访问到的)可以通过Request Headers中的Cookie来发送。

cookie的作用域

Domain和Path指令定义了Cookie的作用域,即需要发送Cookie的URL集合。这里要重点说一下domain

设置cookie(也包括document.cookie方式), 在chrome中的Application中查看cookie的Domain为:

  • 如果没有指定domain,则默认是当前域名(放到业务里面,如果是document.cookie方式,则是页面域名;如果是请求接口,接口返回set-cookie,则是接口域名),仅仅是当前域名,不包括其子域。结果:web.zmrdlb.com;

  • 如果指定了domain,则包括子域。比如设置domain=zmrdlb.com。结果:.zmrdlb.com (注意前面多了.);

第三方cookie

官方概念:

每个Cookie都有与之关联的域(Domain),如果Cookie的域和页面的域是一样的,那么我们称这个Cookie为第一方Cookie(first-party cookie),如果Cookie的域和页面的域不一样,则称之为第三方Cookie(third-party cookie.)。

第三方cookie发送:

大多数浏览器,都允许第三方cookie发送。这个时候涉及到跨域发送cookie

跨域cookie踩坑:

最近做的一个项目,发送了跨域cookie。PC和Android都可以,放到ios就有问题了。排查了半天。

页面域名:web.zmrdlb.com
接口域名:web.api.zmrdlb.net

这个时候,请求接口返回了set-cookie。但是再次请求接口域名下的其他接口,在ios下,cookie老是带不上。

原因

ios对第三方cookie的发送多了一层限制。经测试发现,如果页面域名和接口域名没有共同的父域(二级域名或及以上),则无法发送cookie。

解决方案

接口域名改为:web.api.zmrdlb.com

其他案例

无法更改域名,通过iframe方式解决

官方资料

ps

更多细节请参考官方资料。如遇更多精分,则及时补充。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值