Chrome 的 SameSite 属性：原理与解决方案

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- [一、SameSite 属性的背景与目的](#一、SameSite 属性的背景与目的)
- - [（一）CSRF 攻击与用户追踪问题](#（一）CSRF 攻击与用户追踪问题)
  - [（二）SameSite 属性的引入](#（二）SameSite 属性的引入)
- [二、SameSite 属性的三个值](#二、SameSite 属性的三个值)
- [三、Chrome 80 的变化与影响](#三、Chrome 80 的变化与影响)
- - （一）默认值的变更
  - （二）对跨域请求的影响
- 四、解决方案
- - [（一）后端设置 SameSite 属性](#（一）后端设置 SameSite 属性)
  - （二）前端处理跨域请求
  - （三）本地开发环境的特殊处理
- 五、总结

一、SameSite 属性的背景与目的

（一）CSRF 攻击与用户追踪问题

跨站请求伪造（CSRF）攻击是一种常见的网络安全威胁，攻击者通过诱导用户在当前已登录的网站上执行非预期的操作，从而窃取用户信息或篡改数据。此外，用户在访问多个网站时，浏览器会自动携带跨站的 Cookie，这可能导致用户被追踪。

（二）SameSite 属性的引入

为了解决上述问题，Chrome 51 及更高版本引入了 Cookie 的 SameSite 属性。该属性通过限制 Cookie 的发送范围，有效减少了 CSRF 攻击和用户追踪的风险。

二、SameSite 属性的三个值

（一）Strict

在 Strict 模式下，Cookie 仅会在当前站点的上下文中发送，跨站点时，任何情况下都不会发送 Cookie。这种模式最为严格，可以有效防止 CSRF 攻击，但也可能导致用户体验不佳，例如用户在跨站请求时无法保持登录状态。

（二）Lax

Lax 模式相对宽松，允许在导航到目标网址的 GET 请求中发送 Cookie。具体来说，只有以下三种情况会发送 Cookie：

链接（<a href="..."></a>）
预加载请求（<link rel="prerender" href="..."/>）
GET 表单（<form method="GET" action="...">）

对于 POST、PUT 和 DELETE 等非安全请求，以及 iframe、AJAX 和图片请求，Cookie 将被阻止。Chrome 80 之后，默认设置为 Lax。

（三）None

None 模式允许 Cookie 随跨站请求发送到目标站点，但前提是必须同时使用 Secure 属性，即 Cookie 只能通过 HTTPS 协议传输。否则，设置无效。

三、Chrome 80 的变化与影响

（一）默认值的变更

从 Chrome 80 开始，SameSite 属性的默认值从 None 变更为 Lax。这一变化导致许多依赖跨站 Cookie 的应用出现了问题，例如用户无法在跨站请求中保持登录状态。

（二）对跨域请求的影响

在 Chrome 80 之后，跨域请求中 Cookie 的传递受到了限制。如果需要跨域传递 Cookie，必须显式将 SameSite 设置为 None，并且必须使用 HTTPS 协议。

四、解决方案

（一）后端设置 SameSite 属性

为了确保 Cookie 能够在需要时被正确传递，后端需要在响应头中显式设置 SameSite 属性。例如：

plaintext 复制代码

Set-Cookie: widget_session=abc123; SameSite=None; Secure

注意，设置为 None 时，必须同时设置 Secure 属性。

（二）前端处理跨域请求

在前端，可以通过以下方式处理跨域请求：

使用 HTTPS 协议 ：确保所有请求都通过 HTTPS 协议发送，以满足 Secure 属性的要求。
设置 withCredentials ：在跨域请求中，设置 withCredentials 属性为 true，以确保浏览器发送 Cookie。

（三）本地开发环境的特殊处理

在本地开发环境中，浏览器可能会将本地服务视为跨域域名，导致 Cookie 无法正确传递。可以通过以下步骤解决：

打开浏览器，访问本地服务。
在浏览器的控制台中设置 Cookie：

javascript 复制代码

document.cookie = 'name=xiaoming';

刷新页面，确保 Cookie 设置成功。
再次访问本地服务，后端即可获取到 Cookie 中的数据。

五、总结

Chrome 的 SameSite 属性是为了解决 CSRF 攻击和用户追踪问题而引入的。它通过限制 Cookie 的发送范围，提高了安全性，但也对跨域请求带来了挑战。Chrome 80 之后，默认值变更为 Lax，这导致许多依赖跨站 Cookie 的应用出现了问题。

为了应对这一变化，后端需要在响应头中显式设置 SameSite 属性，同时前端需要确保使用 HTTPS 协议并设置 withCredentials。在本地开发环境中，可以通过手动设置 Cookie 来解决跨域问题。

通过合理配置 SameSite 属性，可以在保障安全的同时，确保应用的正常运行。