html5中http服务默认端口号,你真的知道Cookie吗？SameSite、Secure、HttpOnly

这两天(已经是一个多月前了) SF 上面很多 COOKIE 的问题&＃xff0c;然后还有个 COOKIE 相关的付费问答。

所以咱们今天来这么一节&＃xff0c;废话多说点&＃xff0c;先说说大体问题方向。

跨域如何携带 COOKIE

chrome 80 版本加强隐私。SameSite&＃61;Lax 为默认值&＃xff0c;禁止了一部分场景携带 COOKIE。

COOKIE

用于服务端辨别用户身份&＃xff0c;储存在用户本地的数据。

可以解决客户端与服务端会话状态的问题&＃xff0c;这个状态是指后端服务的状态而非通讯协议(HTTP)的状态。

COOKIE 值的存储

域名下的 COOKIE 一般来说是最大是 4KB。当然大家也不会真的放这么多。

Name / Value

存储是以 Name&＃61;Value 的形式。

Domain / Path 作用域

Domain 是限制域名&＃xff0c;设置为 www.lilnong.top 的话&＃xff0c;cors.lilnong.top 就获取不到了。

Path 是限制路径&＃xff0c;如果设置为 /cors 的话&＃xff0c;/api 下的请求就不会携带该 COOKIE。

Expires / Max-Age 有效性

Expires 是当前 COOKIE 的过期时间&＃xff0c;默认是会话级别。

Max-Age 是当前 COOKIE 经过多少秒失效。

大于 0 是计算经过多少秒失效

等于 0 是会话级别&＃xff0c;关闭浏览器就失效

小于 0 是指 COOKIE 无效&＃xff0c;立即删除

Max-Age 的优先级比 Expires 更高。

HttpOnly 安全性

设置以后客户端脚本就无法通过 document.COOKIE 等方式获取。

有助于避免 XSS 攻击。

Secure 安全性

设置以后客户端只有 HTTPS 协议下才会发送给服务端。

使用 HTTPS 安全协议&＃xff0c;可以保护 COOKIE 在浏览器和 Web 服务器间的传输过程中不被窃取和篡改。

SameSite 安全性

可以设置 COOKIE 在什么场景下会被发送。从而屏蔽跨站时发送 COOKIE&＃xff0c;用于阻止跨站请求伪造攻击(CSRF)。

SameSite 可以设置下面三个值&＃xff1a;

Strict 只允许同站请求携带 COOKIE。比如 lilnong.top 跳转到 www.lilnong.top/cors/&＃xff0c;就属于同站。

Lax(chrome 80 后的默认值) 允许部分第三方请求场景 携带COOKIE。

None(chrome 80 前的默认值) 无论是否跨站都会发送 COOKIE。必须同时加上 Secure 属性&＃xff0c;否则无效&＃xff0c;也就是说只支持 HTTPS。

IOS 12 的 Safari 以及老版本的一些 Chrome 会把 SameSite&＃61;none 识别成 SameSite&＃61;Strict&＃xff0c;所以服务端必须在下发 Set-COOKIE 响应头时进行 User-Agent 检测&＃xff0c;对这些浏览器不下发 SameSite&＃61;none 属性

接下来我们来比对一下跨站的各个场景&＃xff0c;Demo 晚点给吧。

场景类型

场景备注

Strict

Lax

None

链接

不发

发

发

预加载

不发

发

发

get 表单

不发

发

发

post 表单

不发

不发

发

iframe

不发

不发

发

AJAX

不发

不发

发

图片

不发

不发

发

script

jsonp

查看 COOKIE

开发者工具 -> application -> Storage -> COOKIEs -> 选择对应的域名

document.COOKIE 这里只能获取到允许获取 (HTTPOnly) 的。

去本地文件中查看。因为他是持久化的&＃xff0c;所以存放在磁盘上。一些优化管家可以删除垃圾(缓存文件)。

设置 COOKIE

响应头中的 Set-COOKIE&＃xff0c;这个属于最常用的方式。

Set-COOKIE: key1&＃61;value1; path&＃61;path; domain&＃61;domain; max-age&＃61;max-age-in-seconds; expires&＃61;date-in-GMTString-format; secure; httponly; SameSite&＃61;None

document.COOKIE&＃61;"key&＃61;value" 这种是前端设置 COOKIE 。

概念解释

「同站 (same-site)、跨站 (cross-site)」与「第一方 (first-party)、第三方 (third-party)」这两个概念是等价的。

但是和 浏览器同源策略(SOP) 中的「同源 (same-origin)、跨域 (cross-origin)」是完全不同的概念

同站和跨站

同站是指二级域名&＃43;顶级域名&＃xff0c;相等即可。

比如 www.lilnong.top 解析一下就是 主机名.二级域名.顶级域名&＃xff0c;所以判断规则还是比较松的。

eTLD 表示有效顶级域名&＃xff0c;注册于 Mozilla 维护的公共后缀列表(Public Suffix List)中&＃xff0c;例如&＃xff0c;.com、.co.uk、.github.io 等。

eTLD&＃43;1 表示&＃xff0c;有效顶级域名&＃43;二级域名&＃xff0c;例如 taobao.com 等。

同源和跨域

同源策略的同源是指两个 URL 的协议/主机名/端口一致。

域名

备注(请求 https://www.lilnong.top)

https://www.lilnong.top

(同源)同协议、同主机、同端口

http://www.lilnong.top

(跨域)不同协议

https://www.lilnong.top:8081

(跨域)不同端口

http://www.lilnong.top:8081

(跨域)不同协议、不同端口

https://cors.lilnong.top

(跨域)不同主机

总结

基于上面关于 COOKIE 的介绍我们可以知道&＃xff0c;Chrome 跨站时 COOKIE 会因为 SameSite 的设置导致异常。

跨域时要携带 COOKIE 时&＃xff0c;我们还要注意 withCredentials 的设置。然后就是清除 COOKIE&＃xff0c;重启浏览器了。

微信公众号&＃xff1a;前端linong

参考文章

浏览器系列之 COOKIE 和 SameSite 属性

public_suffix_list

PUBLIC SUFFIX LIST

COOKIE 的 SameSite 属性

当浏览器全面禁用三方 COOKIE

关于找一找教程网

本站文章仅代表作者观点&＃xff0c;不代表本站立场&＃xff0c;所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章&＃xff0c;希望广大程序员努力学习&＃xff0c;让我们用科技改变世界。

[你真的知道 COOKIE 吗&＃xff1f; SameSite 、 Secure 、 HttpOnly]http://www.zyiz.net/tech/detail-134232.html