Question

使用Laravel和Vue.js构建一个小的 SPA 时遇到了CSRF的多个困难：

我使用index.html作为唯一视图，其余视图由vue-router使用单个文件组件（即.vue文件）处理
因为我前面没有使用PHP或Blade，所以我无法将csrf_token()注入到我的视图中。即使我这样做了，令牌也会最终到期，但由于应用程序没有（或很少）页面刷新，它不知道令牌是否发生了变化，并且它最终无法用旧的方式发出AJAX请求令牌
Some answers建议在Cookie中传递令牌，然后使用JS检索它。这种方法遇到与上述相同的问题 - 当令牌改变时，SPA永远不会得到通知
我可以挖掘Laravel的内部工作，并在每次令牌改变时抛出一个事件;前端可以使用Laravel Echo来听取变化，但随后提出问题，是否值得打扰？
最后，我被建议使用JWT;但是，据我所知，JWT用于身份验证，而CSRF - 用于每个请求，无论HTTP动词或意图如何。

考虑到最后两点，您认为在Laravel SPA中使用CSRF令牌是否必要/可取？如果是这样，最好的实现是什么（带有令牌的cookie，返回令牌的专用路由，或其他）？如果没有，有哪些替代方案？

Answer 1

评论没有足够的空间，所以我将其添加为答案，但这只是一个概念，因为我对Vue的体验非常低。

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

所以概念就是这样：

Set a custom header from Laravel。
在构建/启动Vue应用程序时，获取自定义标题并将其设置为全局。
发出请求时，拦截它并从全局存储中添加CSRF令牌

axios.interceptors.request.use（function（config）{ //从存储它的地方获取令牌并添加到请求中 }）;
拦截响应并存储新令牌

axios.interceptors.response.use（function（response）{ //将新的CSRF令牌存储在存储第一个令牌的同一位置。 }）;
永远循环

Laravel SPA是否仍应使用CSRF令牌进行安全保护？

1 个答案: