返回

Chrome SameSite 问题及本地开发方案

前端

ct，Value）：

- Strict: 强制 SameSite 检查，确保Cookie只能被第一方站点使用，即产生的站点（不能跨域）
- Lax： 宽松的 SameSite 检查。Lax 模式下，Cookie在正常访问站点时依旧可以跨域传递（除了 Get 请求，其它方法），仅仅在跨域提交表单时才会限制 Cookie 的传递，从而防止 CSRF 攻击。
- None：不禁用第三方 Cookie。

    **只有 SameSite 设置为 None 才可以设置 Secure 属性为 True。如果需要加密传输 Cookie，那么需要兼容旧版本，需要在 SameSite 值设置的 HTML 里配置 Cookie 的路径，例如 <meta http-equiv="Set-Cookie" content="key=value;path=/">。默认情况 Cookie 的路径仅作用于一级目录，例如，浏览器会拒绝在 www.example.com 的下级子路径访问 Cookie，像 /a/b/c/d 这样的路径。** 


    一般来说我们兼容旧版本的浏览器，就要设置好 SameSite 属性，在配置了 SameSite 的环境中，如果在跨域的时候携带上了 cookie，服务端就会拒绝处理请求，导致程序崩溃。


    因为在当前大多数的环境里面开发，都是直接在本地起一个服务，浏览器就会认为当前的域名是一个跨域域名，而如果不携带 cookie，后端是无法获知用户身份的。


    这里介绍一种思路，就是在本地开发时，在浏览器里面先设置好 cookie，然后再访问本地服务，这样服务端就可以获得 cookie 里的数据。下面介绍具体的步骤：

1. 打开浏览器，访问本地服务，然后在浏览器的控制台里面输入以下代码：

document.cookie = 'name=xiaoming'

2. 刷新页面，然后查看浏览器的控制台，应该可以看到 cookie 已经设置成功。

console.log(document.cookie) // name=xiaoming

3. 再次访问本地服务，就可以看到服务端已经可以获取到 cookie 里的数据。

    这种方法很简单，但是很有效。它可以帮助你快速地在本地开发环境中解决 SameSite 问题。

Chrome SameSite 问题及本地开发方案

SameSite 是 Chrome 51 版本后 91 版本前引入的一个属性，用来防止 CSRF 攻击和用户追踪。SameSite 可以设置三个值（Strict、Lax、None），分别对应严格、宽松和不禁用第三方 Cookie。

在开发环境中，由于浏览器会认为本地服务是一个跨域域名，因此如果在跨域的时候携带上了 cookie，服务端就会拒绝处理请求，导致程序崩溃。

为了解决这个问题，可以在本地开发环境中通过以下步骤设置 cookie：

  1. 打开浏览器，访问本地服务。
  2. 在浏览器的控制台里面输入以下代码：
document.cookie = 'name=xiaoming'
  1. 刷新页面，然后查看浏览器的控制台，应该可以看到 cookie 已经设置成功。
console.log(document.cookie) // name=xiaoming
  1. 再次访问本地服务，就可以看到服务端已经可以获取到 cookie 里的数据。

这种方法简单有效，可以帮助你快速地在本地开发环境中解决 SameSite 问题。