配置 cookie 以使用 CORS，但仅限于子域

Question

当前端和后端是两个不同的子域时，我正在尝试找出一种方法来使基于 cookie 的身份验证正常工作，而不会让自己受到 CSRF 威胁。

目前，我正在求助于将 cookie 属性 sameSite 设置为“无”。问题是，这会使网站完全暴露在 CSRF 攻击之下。

例如，这是我的 cookie，sameSite 设置为“lax”： cookieName=cookieValue; expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=/; httponly; SameSite=Lax; Secure; Domain=some-sub-domain.localhost;

如果我的 React 应用程序在 locahost:3000 上运行，这是相同的域但不同的子域（和端口..），这仅适用于 sameSite=None。如果将 sameSite 更改为“lax”或“strict”，我会在网络选项卡中的 set-cookie 标头旁边收到以下错误：

这种通过 Set-Cookie 标头设置 cookie 的尝试被阻止，因为它具有“SameSite=Lax”属性，但来自不是对顶级导航的响应的跨站点响应。

我尝试了所有可能的配置（包括“.localhost”），唯一可行的是将 SameSite 设置为“None”，但这会使我的网站完全暴露于 CSRF 攻击（假设我不包含一些CSRF 令牌，这是另一回事）。

我的想法是简单地允许 cookie 在子域之间传输，同时在不同域上阻止它们。我的意思是，任何子域最终都会在我的控制之下。

可以吗？

Answer 1

如果有人感兴趣，我发现了“问题”：

它是“本地主机”。这不是一个“正常”的域。它不是 localhost.com 或 localhost.net——它只是普通的 localhost。

因此，设置诸如 frontend.localhost 和 backend.localhost 之类的“子域”是行不通的（除非您使用 sameSite=none），因为它们实际上是完全不同的域，而不是子域

要在本地解决此问题，您应该在操作系统的 hosts 文件中设置虚拟主机。类似于 frontend.local.xyz 和 backend.local.xyz。在这种情况下，“local.xyz”是实际域，其他是子域。这解决了“问题”，并允许“严格” cookie 在它们之间传输。

请注意，如果您的域在此列表中，这仍然不起作用： https://publicsuffix.org/list/public_suffix_list.dat