【Chrome web.dev Live 2020总结】第3天第8集:Cookie及其SameSite属性

举报
华为云官网技术团队 发表于 2020/07/22 17:20:33 2020/07/22
【摘要】 Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Cookie 主要用于会话状态管理,用户个性化设置,浏览器行为跟踪。

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Cookie 主要用于会话状态管理,用户个性化设置,浏览器行为跟踪。在网络环境错综复杂的今天,如何合理设置的 Cookie 既可以保证现有业务的正常进行,也能防止网络攻击。而且Chrome80版本后,Cookie策略有所改动,如何测试自己网站对于此改动的兼容性。下面便介绍 Cookie 的设置和调试

8.1 创建 Cookie

当服务器收到 HTTP 请求时,服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下 Cookie,之后对该服务器每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器

Set-Cookie可以包含以下字段,用,分割

 8.1.1 <cookie-name>=<cookie-value>

此 cookie 字段的键值对

<cookie-name>和<cookie-value>的字符限制在此不赘述,可以参见MDN 文档

<cookie-name>字段支持两种前缀头,以获取更安全的设置

__Secure-

必须同时设置Secure属性

必须应用于 HTTPS 页面

__Host-

必须同时设置Secure属性

必须应用于 HTTPS 页面

不可设置Domain属性,即子域无法获取此 cookie 字段

Path属性必须为"/",即当前域名所有页面资源可以获取此 cookie 字段

8.1.2 Expires=<date>

cookie 的最长有效时间

如果没有设置这个属性,那么表示这是一个会话期 cookie。会话结束时此 cookie 字段失效

8.1.3 Max-Age=<non-zero-digit>

在 cookie 失效之前需要经过的秒数

优先级高于Expires=<date>

8.1.4 Domain=<domain-value>

指定可以携带此 cookie 字段的域名

默认值为当前域名(不包含子域)

8.1.5 Path=<path-value>

指定可以携带此 cookie 字段的 URL 路径

如果 Path=/docs,那么 “/docs”, “/docs/Web/” 或者 “/docs/Web/HTTP” 都满足匹配的条件

8.1.6 Secure

标识此 cookie 字段只有在SSL和HTTPS协议下才会被携带至服务端

8.1.7 HttpOnly

标识前端 JS 无法通过Document.cookie等访问此 cookie 字段

仅是无法通过 API 访问此字段,依然会被传递至服务端

8.1.8 SameSite

限制携带此 cookie 字段的站点

None

Cookie 将在所有上下文中发送,即允许跨域发送

Lax(Chrome80+默认值)

Cookies 允许在第一方上下文和第三方网站发起的 GET 请求一起发送

Strict

Cookie 只会在第一方上下文中发送,不会与第三方网站发起的请求一起发送

8.1.9 总结实战

以官网网关某cookie为例

HWS_ID=bY7zPn3j6wc*************sexYuA6K7tZU.

此 cookie 字段的键值对

  • Domain=.huaweicloud.cn

此 cookie 字段允许*.huaweicloud.cn 域名携带

  • Path=/

此 cookie 字段允许*.huaweicloud.cn 域名下的所有资源携带

  • SameSite=Lax

此 cookie 字段仅会在第一方上下文和第三方网站发起的 GET 请求中携带

  • Secure

此 cookie 字段仅会在SSL和HTTPS协议下携带

  • HttpOnly

此 cookie 字段无法被前端 JS 获取

 8.2 测试网站对新Cookie策略的兼容性

 8.2.1 创建调试Cookie环境

打开Chrome隐身窗口。在Chrome浏览器中CTRL+SHFIT+N

在地址栏输入chrome://flags/,在搜索框输入cookie

将SameSite by default cookies,Cookies without SameSite must be secure设置为Enabled

点击右下角的Relaunch按钮重启浏览器使设置生效

在地址栏输入https://samesite-sandbox.glitch.me/,确保所有检查项都是通过的

步骤如下所示:

效果如下:

8.2.2 测试自己的网站

重点关注SameSite=Lax的cookie字段和POST请求

可以通过Chrome的DevTools查看是否存在由SameSite引起的问题


【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容, 举报邮箱:cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。