withCredentails true为什么没带上coo

发表于

跨域请求携带cookie需同时满足以下三个条件：

  1. 跨域：CORS
  2. 权限：set-cookie时的same-site
  3. 声明：withCredentails: true

跨域

cors方式可以解决跨域问题，关键点：

  1. options预检请求的发送条件与处理
  2. response header的设置

cookie权限：

（涉及cookies时，是否携带主要取决于是否跨站）

该cookie在set-cookie时same-site的配置：

  1. Strict ，所有跨站请求都不发送cookies
  2. Lax(default) ，大部分跨站请求不发送cookies.
请求类型 示例 正常情况 Lax
链接 <a href="..."></a> 发送 Cookie 发送 Cookie
预加载 <link rel="prerender" href="..."/> 发送 Cookie 发送 Cookie
GET 表单 <form method="GET" action="..."> 发送 Cookie 发送 Cookie
POST 表单 <form method="POST" action="..."> 发送 Cookie 不发送
iframe <iframe src="..."></iframe> 发送 Cookie 不发送
AJAX $.get("...") 发送 Cookie 不发送
Image <img src="..."> 发送 Cookie 不发送

（摘自www.ruanyifeng.com/blog/2019/0…）

  1. None , 允许跨站发送。（必须同时设置Secure）也就是说必须在https协议下才允许跨站发送cookie

💡 跨站一定跨域、跨域不一定跨站

相关细节

预检请求

判断条件：

💡 以下两个条件全部满足会则**不会**发送预检请求，否则发送

  • 请求方法是以下三种方法之一：
+ HEAD
+ GET
+ POST
  • HTTP的头信息不超出以下几种字段：
+ Accept
+ Accept-Language
+ Content-Language
+ Last-Event-ID
+ Content-Type：只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`

预检请求的Response header：

  1. Access-Control-Allow-Origin
  2. Access-Control-Allow-Methods
  3. Access-Control-Allow-Headers
  4. Access-Control-Allow-Credentials
  5. Access-Control-Max-Age

正常跨域请求

request header

浏览器自动添加origin字段

response header

  1. Access-Control-Allow-Origin：允许的域
  2. Access-Control-Allow-Credentials：是否允许携带cookies
1. 为true时Access-Control-Allow-Origin不能设置为\*
  1. Access-Control-Expose-Headers：允许客户端拿到response中的哪些header

背后的思考：

跨域主要会带来一些安全问题，如果用户在某个网站登陆后，访问别的网站就可以携带已登陆的网站的cookies进行一些危险操作。

  1. 获取用户信息，
  2. 危险操作
  3. 获取用户浏览痕迹（在A站放入B站的图片，B站可以根据请求cookie得知某个用户浏览了哪个网页）

防御措施：

  1. HttpOnly：禁止script读取cookie
1. 防止xss窃取cookie
  1. Secure：必须通过https发送
  2. SameSite：跨站禁止发送cookie

所以最好不要跨域

  • 生产环境应当使用代理避免跨域

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%