2017-05-28 237 views
4

我建立一個小SPA當與Laravel和Vue.js跑進與CSRF多個困難:Laravel SPA應該使用CSRF令牌來保證安全嗎?

  • 我使用單個文件組件使用index.html如,其餘部分由vue-router處理的唯一視圖(即.vue文件)
  • 因爲我沒有在前面使用PHP或Blade,所以我不能在我的視圖中注入csrf_token()。即使我這樣做了,令牌最終也會過期,但因爲應用程序沒有(或很少)頁面刷新,所以它不知道令牌是否發生了更改,並且最終無法使用舊的AJAX請求令牌
  • Some answers建議在cookie中傳遞令牌,然後用JS檢索它。這種方法存在與上述相同的問題 - 當令牌改變時,SPA從不被通知
  • 我可以在Laravel的內部工作中挖掘並在每次令牌更改時拋出一個事件;前端可以使用Laravel Echo來聽取更改,但問題引發了,是否值得打擾?
  • 最後,我被建議使用智威湯遜;然而,據我所知,JWT用於認證目的,而CSRF - 對於每一個請求,不管HTTP動詞或意圖。

考慮到最後兩點,您是否認爲在Laravel SPA中使用CSRF令牌是必要/可取的?如果是這樣,什麼是最好的實現(帶有令牌的cookie,返回令牌的專用路線或其他)?如果不是,有什麼選擇?

+0

就在你的第三個項目的想法:如果Laravel改變CSRF通過cookie令牌和你有一個Vue公司'interceptor',將始終檢索的cookie,將它仍然檢索舊的CSRF,因爲頁面沒有重新加載?瀏覽器是否會收到Ajax請求的Cookie更改? –

+0

另一個想法:您可以讓Laravel在每個被Vue攔截的請求上添加一個自定義的HTTP Header,並將其存儲爲下一個請求。該應用程序使用Blade傳遞的有效CSRF啓動。第一個Ajax將包含下一個應該使用的令牌。 –

+0

@MarcoAurélioDeleu你可以用攔截器擴展你的想法嗎?我相信它需要'vue-resource'包,它事實上已經被Vue 2.0中的Axios所取代了?你能給出一個代碼示例嗎?這將非常感激 – Alex

回答

2

評論沒有足夠的空間,所以我添加了這個作爲答案,但這只是一個概念,因爲我對Vue的使用經驗非常低。


From the docs

// 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(函數(配置){// 從你保存它的地方讓您的令牌和添加到請求 });

  • 攔截響應,並存儲一個新的令牌

    axios.interceptors.response.use(功能(響應){// 存放在同一個地方你存儲一日一新的CSRF令牌。 });

  • 永遠循環下去