防止跨站攻擊——CSRFToken
阿新 • • 發佈:2019-01-05
怎麼防止跨站攻擊:
表單:在 Form 表單中新增一個隱藏的的欄位,值是 csrf_token。
非表單:在ajax獲取資料時,新增headers:{ 'X-CSRFToken':getCookie('csrf_token') }。
原理:在瀏覽器訪問網站A時,網站A設定cookie會增加隨機值csrf_token,這個值是隨機的。返回給瀏覽器時,cookie會儲存在瀏覽器,同時會把csrf_token傳給表單裡面的隱藏欄位。所以當瀏覽器用自己的表單時會自帶csrf_token,網站A取到這個值和cookie裡的csrf_token一致就通過。而網站B裡面的表單沒有這個值,所以不能通過,這樣就阻止了惡意攻擊。非表單也是這樣的原理。
CSRFProtect(app)
上一步的作用:# 開啟CSRF保護(不會設定隨機值。只會對比隨機值,沒有或錯誤都無法訪問路由
# 從現在起,程式會獲取cookie中的隨機值,以及從表單或者ajax中獲取隨機值,進行對比
# 如果對比失敗,則無法訪問路由
# 後續需要設定隨機值到cookie中,以及增加ajax中的headers
表單:在 Form 表單中新增一個隱藏的的欄位,值是 csrf_token。
<form method="post"> <input type="hidden" name="csrf_token" value="{{ csrf_token }}"> <label>賬戶:</label><input type="text" name="to_account" placeholder="請輸入對方賬戶"><br/> <label>金額:</label><input type="number" name="money" placeholder="請輸入轉賬金額"><br/> <input type="submit" value="轉賬"> </form>
非表單:在ajax獲取資料時,新增 headers:{ 'X-CSRFToken':getCookie('csrf_token') }。
$.ajax({ url:"/passport/login", method: "post", data: JSON.stringify(params), contentType: "application/json", headers:{ 'X-CSRFToken':getCookie('csrf_token') }, success: function (resp) { if (resp.errno == "0") { // 重新整理當前介面 location.reload(); }else { $("#login-password-err").html(resp.errmsg) $("#login-password-err").show() } } })