JavaScript:set-cookie 和 response 是否处理原子操作？

Question

我使用以下模式进行具有 CSRF 保护的无状态身份验证:

1. 为每个已处理的请求生成新的 JWT cookie
2. 为每个已处理的请求生成新的 CSRF token 。将其包含在 JWT token 和响应 header 中
3. 断言请求 header 中的 CSRF token 与 JWT token 中的匹配

客户端代码从每个响应中提取 CSRF token 并将其包含在每个请求中。新 token 存储在浏览器 session 存储中。我有点担心 cookie 和 token 在客户端不同步。

考虑以下简化示例

return axios.post(uri, payload, { headers: { 'X-CSRF-TOKEN': sessionStorage.getItem('X-CSRF-TOKEN') }})
    .then(response => sessionStorage.setItem('X-CSRF-TOKEN', response.headers['X-CSRF-TOKEN']))

浏览器 cookie 更新和响应是否处理给定 JavaScript 事件循环模型的原子操作？或者其他异步 XHR 请求是否有可能在边际时间窗口中对当前 cookie 使用陈旧的 token 值？

Answer 1

事件循环模型允许其他代码在 response => sessionStorage.setItem('X-CSRF-TOKEN', response.headers['X-CSRF-TOKEN']) 之前运行实际执行，因为此回调将在接收 HTTP 响应时排队。同时，由网络事件、计时器或页面上的用户事件触发的其他一些回调可能已排队。

您的后端应该在未收到 CSRF token 时返回 403，因此您可以实现“重试”逻辑来解决您的问题。