资源

SameSite cookies explained
https://web.dev/samesite-cookies-explained/

SameSite cookie recipes
https://web.dev/samesite-cookie-recipes/

RFC6265bis Same-Site Cookies draft-ietf-httpbis-cookie-same-site-00

概念

A request is “same-site” if its target’s URI’s origin’s registrable domain is an exact match for the request’s initiator’s “site for cookies”, and “cross-site” otherwise.
To be more precise, for a given request (“request”), the following algorithm returns “same-site” or “cross-site”:

1. If “request”‘s client is “null”, return “same-site”.
2. Let “site” be “request”‘s client’s “site for cookies” (as defined in the following sections).
3. Let “target” be the registrable domain of “request”‘s current url.
4. If “site” is an exact match for “target”, return “same-site”.
5. Return “cross-site”.

link

The site is the combination of the domain suffix and the part of the domain just before it. For example, the www.web.dev domain is part of the web.dev site.
If the user is on www.web.dev and requests an image from static.web.dev then that is a same-site request. If the user is on your-project.github.io and requests an image from my-project.github.io that’s a cross-site request

when following a link into your site, say from another site or via an email from a friend, on that initial request the cookie will not be sent.

从别的链接跳到你的网站时, 初始请求 Strict 不带cookie, Lax带cookie

表格原文链接 (原文其他内容过于简略无参考价值)

SameSite属性兼容处理

link

• 同时按新旧规则设置cookie, 后端依次检查这俩cookie

  Set-cookie: 3pcookie=value; SameSite=None; Secure
  Set-cookie: 3pcookie-legacy=value; Secure

const express = require('express');
const cp = require('cookie-parser');
const app = express();
app.use(cp());
app.get('/set', (req, res) => {
  // Set the new style cookie
  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
  // And set the same value in the legacy cookie
  res.cookie('3pcookie-legacy', 'value', { secure: true });
  res.end();
});
app.get('/', (req, res) => {
  let cookieVal = null;
  if (req.cookies['3pcookie']) {
    // check the new style cookie first
    cookieVal = req.cookies['3pcookie'];
  } else if (req.cookies['3pcookie-legacy']) {
    // otherwise fall back to the legacy cookie
    cookieVal = req.cookies['3pcookie-legacy'];
  }
  res.end();
});
app.listen(process.env.PORT);

• 或者后端检查client版本, 设置相应cookie

  Alternatively at the point of sending the Set-Cookie header, you can choose to detect the client via the user agent string. Refer to the list of incompatible clients and then make use of an appropriate library for your platform, for example ua-parser-js library on Node.js. It’s advisable to find a library to handle user agent detection as you most probably don’t want to write those regular expressions yourself.