如何为网站的 Cookie 添加 SameSite 属性
后知后觉 暂无评论

对于经常使用火狐的用户来说,以下这个报错应该很常见,「某些 Cookie 滥用推荐的 "SameSite" 属性」。

溯源

报错一般类似如下:

某些 Cookie 滥用推荐的“SameSite“属性

由于 Cookie “_site”的“SameSite”属性设置为“None”,但缺少“Secure”属性,此 Cookie 未来将被拒绝。若要了解“SameSite“的更多信息,请参阅:https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

这是因为 Chromium 在 2019年5月 提出了一个试验性的隐私改动,具体可以参考「准备好迎接新的 SameSite=None; Secure Cookie 设置」。

5 月份,Chrome 宣布推出了一个默认安全的 Cookie 安全模型,由新的 Cookie 分类系统(规范)提供支持。我们一直致力于改善整个网络的隐私性和安全性,此计划就是这方面的工作之一。

Chrome 计划于 2020 年 2 月在 Chrome 80 中实现这一新模型。Mozilla 和 Microsoft 也表示,他们打算按照各自的时间规划在 Firefox 和 Edge 中实现此新模型。虽然 Chrome 变更还有几个月才会实施,但负责管理 Cookie 的开发者需要立即评估自身准备情况,这一点非常重要。本博文将概述总体概念;如需获取开发者指南,请参阅 web.dev 上的 SameSite Cookie 的说明。

简而言之就是为了“隐私”和“安全”,具体的说明可以参考 Mozilla 官方手册「SameSite cookies」,那么开始着手改造一下。

其中 SameSite 的值可以是以下三种:

说明
Lax默认模式:cookies 在跨站子请求中不允许携带,比如 images 或者 frames。这是浏览器中的默认值。
Strict严格模式:cookie 只会在第一方上下文中发送,不会与第三方网站发起的请求一起发送。
None宽松模式:cookie 将在所有上下文中发送,即允许跨站发送。

同时需要注意的是在指定 SameSite 时必须同时携带 Secure 标记,否则会被浏览器拒绝,并产生以下提示:

Some cookies are misusing the “sameSite“ attribute, so it won’t work as expected.
Cookie “myCookie” rejected because it has the “sameSite=none” attribute but is missing the “secure” attribute.

这是因为 SameSite 要求所有 cookies 必须在 HTTPS 协议下进行传送,不允许非安全连接传送。

谷歌统计

网站内若使用了谷歌统计,在引入谷歌统计的代码后,刷新页面即可看到下面类似的警告信息。

由于 Cookie “_ga”的“SameSite”属性设置为“None”,但缺少“Secure”属性,此 Cookie 未来将被拒绝。若要了解“SameSite“的更多信息,请参阅:https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

那么如何进行解决呢,查询后发现只需要在引入谷歌统计的 javascript 中加入 cookieFlags 即可,比如谷歌提供的 gtag.js 代码一般这样:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JJJJJJJJJJ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JJJJJJJJJJ');
</script>

使用 cookieFlags 参数即可对其进行修改

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JJJJJJJJJJ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JJJJJJJJJJ', {
    cookie_flags: 'Max-Age=63072000;Secure;SameSite=None'
  });
</script>

即可让谷歌统计创建的用于统计的 cookie 携带上 SameSite 等属性,即可消灭浏览器上的警告信息。

PHP 网站

如果网站使用 PHP 进行构建,那么这部分的自定义 cookie 应该如何改造呢?

其实很简单,参考「PHP 官方手册」可以直接使用 PHP 配置进行修改。

<?php
session_set_cookie_params(["SameSite" => "Strict"]); //none, lax, strict
session_set_cookie_params(["Secure" => "true"]); //false, true
session_set_cookie_params(["HttpOnly" => "true"]); //false, true
session_start(); //everything before this

或者可以在服务器的配置文件 php.ini 中修改

[Session]
session.cookie_samesite = "Strict"
session.cookie_secure = 1
session.cookie_httponly = 1

修改后重启服务即可查看效果。


附录

参考链接

本文撰写于一年前,如出现图片失效或有任何问题,请在下方留言。博主看到后将及时修正,谢谢!
禁用 / 当前已拒绝评论,仅可查看「历史评论」。