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

  • 为每个已处理的请求生成新的JWT cookie
  • 为每个已处理的请求生成新的CSRF token 。将其包含在JWT token 和响应 header
  • 声明请求 header 中的CSRF token 与JWT token
  • 中的CSRF 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']))
    

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

    最佳答案

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

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

    07-24 09:50
    查看更多