前端來防止csrf,這個做法是否有漏洞?

前端來防止csrf,這個做法是否有漏洞?該方法是否可行，請大家指教。

想法起源

在使用vue這樣前後端分離的框架中，想把csrf驗證碼直接由後端渲染到表單中非常的困難，就想有沒有可以直接由前端預防csrf

1、依據條件

1. csrf無法獲取cookie中的值
2. csrf無法偽造cookie中的值（同源策略）

2、實現流程

1. 點擊提交按鈕時，執行ajax方法,隨機生成一個csrf 驗證碼，同時將其存入cookie中，把csrf驗證碼放入ajax的請求數據中，然後發送ajax請求。
2. 後端接受到請求，提取ajax 的csrf 驗證碼與 cookie中的csrf進行比較，兩者相同則通過。響應請求時,清除瀏覽器中csrf的cookie。

3、安全說明

1. csrf每次都是提交時臨時生成，請求響應時就清除。也就是說csrf 驗證碼 在cookie中的生命周期就是從點擊按鈕到響應結束
2. 一般情況下的csrf攻擊時,帶的cookie中連csrf欄位都沒有，直接就不能通過驗證。當然如果csrf攻擊恰巧發生在真實用戶請求中，那麼就繼續驗證表單中的csrf欄位,csrf欄位隨機生成每次請求時都不一樣,不可能偽造。

你都已經是 ajax 請求了，簡單的加一些特製請求頭就足以防禦一般的 csrf，不需要設 cookie 然後伺服器刪 cookie 那麼複雜。

你也已經說了同源策略，那麼當前端和後端不同源的時候，你在前端 set-cookie 是無效的，因此這個方案就走不通了。

還有就是，即使是前後端完全分離，後端來做 CSRF 也是沒問題的，因為這個HTML的 index 文件可以是後端的模板文件，在這個模板文件里，後端就可以寫入 CSRF-TOKEN，然後做前後端分離的時候，只需要在模板文件里寫入前端 MVVM 框架的 root-dom 就行了（我用的 Vue.js，其它的不清楚）。

基本上就解決 CSRF 的問題了。

其實 CSRF 無法很好處理的地方在於 SSR，並且後端不是 Node.js，而是其它語言，那這個 CSRF-TOKEN 的傳遞就很麻煩了。但我感覺也是有辦法的。

所以說 CSRF 並不需要前端來解決。

思路是對的，這裡在submit cookie裡面有講到跟你差不多的解法

When a user authenticates to a site, the site should generate a (cryptographically strong) pseudorandom value and set it as a cookie on the user"s machine separate from the session id. The site does not have to save this value in any way, thus avoiding server side state. The site then requires that every transaction request include this random value as a hidden form value (or other request parameter). A cross origin attacker cannot read any data sent from the server or modify cookie values, per the same-origin policy. This means that while an attacker can force a victim to send any value he wants with a malicious CSRF request, the attacker will be unable to modify or read the value stored in the cookie. Since the cookie value and the request parameter or form value must be the same, the attacker will be unable to successfully force the submission of a request with the random CSRF value.

原文在這裡