【Laravel】 解決 XSRF-TOKEN 加上 httponly,導致 Vue 無法取得 CSRF 令牌

Laravel 在傳遞 POST 表單時,需透過 表單中的 CSRF標籤 進行驗證,以防止跨站請求偽造。

但因弱點掃描需求,需在 Cookie 上加上 httponly 標籤,導致 JavaScript 無法取得 Cookie 中的 XSRF-TOKEN 進而驗證失敗..

現在前後端分離的時代,大多前端都是以JavaScript進行編譯,React、Vue等為大宗

Larvel 的 XSRF-TOKEN 的驗證機制會因 Cookie 加上 httponly後,

無法讓前端取得,導致異常。

其實官網有提及 X-CSRF-TOKEN 也是可以 從HTML表頭中的 meta tag 取得

所以在 Vue.js 透過以下方式設置

方式 1 

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

 

方式2

或是更極端一點,直接加入 VerifyCsrfToken 白名單…