我将以下模式用于具有CSRF保护的无状态身份验证:
客户端代码从每个响应中提取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,因此您可以实现“重试”逻辑来解决您的问题。