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

Posted 2023-03-10

【中文标题】JavaScript：set-cookie 和响应处理原子操作吗？

【英文标题】：JavaScript: Is set-cookie and response handling an atomic operation?

【发布时间】：2020-02-14 07:29:19

【问题描述】：

我使用以下模式进行具有 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 使用过时的令牌值？

【参考方案1】：

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

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