cookie小知识

拿一个Http POST请求来说 http://aaa.www.com/xxxxx/list

1. 浏览器端某个cookie的domain字段等于http://aaa.www.com或者http://www.com (在同一个域内)
2. 都是http或者https，或者不同的情况下Secure属性为false
3. 要发送请求的路径，即上面的xxxxx跟浏览器端cookie的path属性必须一致，或者是浏览器端cookie的path的子目录，比如浏览器端cookie的path为/test，那么xxxxxxx必须为/test或者/test/xxxx等子目录(如果cookie设置在http://www.com/list中，那么请求http://aaa.www.com/xxxxx/list可以携带)

如果你最近有关注过chrome的控制台，可能会发现经常报一些warning：

A cookie associated with a cross-site resource at http://baidu.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure.

出现这个警告的原因是：chrome在80版本之后，更新了cookies的携带机制，把原来cookie的SameSite属性值，由None改成了Lax，这就会导致一些需要第三方cookie的应用产生了异常。

在介绍SameSite属性之前，我们先来复习一下cookie的基础知识

cookie常见的属性:

Name: cookie名。

Value: cookie值。

Domain: cookie的域。如果设成.deepred.com，那么a.deepred.com和b.deepred.com域名下，都可以使用.deepred.com的cookie。

Path: cookie的路径。请求资源的路径一定要包含这个path才能携带cookie。一般设置成/即可。

Expires/Max-Age: cookie过期时间。默认不设置，则是Session会话，关闭页面后，该cookie立即失效。

HttpOnly: 设成true后，JS使用document.cookie则访问不到。常用于避免XSS攻击。

Secure: 标记为Secure的cookie只应通过被HTTPS协议加密过的请求发送给服务端。

SameSite: 用来限制第三方cookie。

最后一个属性非常重要，也就是我们即将要说的SameSite了。

我们假设有一个名字为sessionId的cookie，domain设置成了.demo.com。

1.在a.demo.com域名下，ajax在该域名下的所有请求，都会自动带上sessionId

ajax.get('/api/data') // 自动带上sessionId

2.在b.demo.com域名下，ajax在该域名下的所有请求，都会自动带上sessionId

ajax.post('/api2/data2') // 自动带上sessionId

3.在b.demo.com域名下，ajax请求a.demo.com的api，需要设置withCredentials才能带上sessionId

ajax.get('https://a.demo.com/api/data') // 不能自动带上sessionId

ajax.get('https://a.demo.com/api/data', {withCredentials: true}) // 自动带上sessionId

注意一下： https://a.demo.com/api/data需要支持cors跨域，并且Access-Control-Allow-Origin不能设成*，要设置成https://b.demo.com，只有这样，withCredentials才有用

router.get('/api/data', (ctx, next) => {
  ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , myheader');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  ctx.set('Access-Control-Allow-Credentials', 'true');
};

4.在b.demo.com域名下，使用iframe加载a.demo.com，会自动带上sessionId

a.demo.com和b.demo.com同属一个域名下的子域名(同站)

5.在a.demo2.com域名下，ajax请求a.demo.com的api，需要设置withCredentials才能带上sessionId

ajax.get('https://a.demo.com/api/data') // 不能自动带上sessionId

ajax.get('https://a.demo.com/api/data', {withCredentials: true}) // 自动带上sessionId

6.在a.demo2.com域名下，使用iframe加载a.demo.com，会自动带上sessionId

a.demo.com和a.demo2.com属于完全不相干的两个网站(跨站)

目前为止，都是我们所熟知的cookie携带场景。

然而，在chrome 80版本之后，谷歌把cookie的SameSite属性，从None改成了Lax。这时候，会导致第5和第6种场景sessionId因为跨站而导致丢失！

跨站解释

http://a.demo.com和http://b.demo.com属于同站，http://a.demo.com和http://a.demo2.com属于跨站

注意和跨域做比较: http://a.demo.com和http://b.demo.com属于跨域

ctx.cookies.set('sessionId', {
  maxAge: 1000 * 60 * 60,
  secure: true,
  sameSite: 'none',
});