JavaScript：set-cookie 和响应处理原子操作吗？答案

【问题标题】：JavaScript: Is set-cookie and response handling an atomic operation?JavaScript：set-cookie 和响应处理原子操作吗？
【发布时间】：2023-03-16 01:25:02
【问题描述】：

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

为每个处理的请求生成新的 JWT cookie
为每个处理的请求生成新的 CSRF 令牌。将其包含在 JWT 令牌和响应标头中
断言请求标头中的 CSRF 令牌与 JWT 令牌中的令牌匹配

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

考虑以下简化示例

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']))

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

【问题讨论】：

标签： javascript reactjs cookies jwt csrf

【解决方案1】：

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

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

【讨论】：