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

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引起的问题