全端勇士之路 Node.js 基礎學習-CSRF 篇

發表於 | 更新於 | 分類於

前言

CSRF 中文又稱為跨站請求偽造，這是一個非常常見的攻擊手法，如果沒有謹慎處理，是有可能導致系統掛掉的

CSRF 是什麼

一般來講我們都會在某個網頁上操作，假設在註冊

Google 註冊

「我們都會透過瀏覽器去操作註冊的，但是 CSRF 可能就是透過一些程式來去跟你每幾秒請求註冊，這個動作就有可能導致系統掛掉。」 - 這一段解釋太過像 DDOS，所以換另一種說法 ↓

CSRF 簡單來講就是利用使用者瀏覽器對於網站的信任來達到攻擊，假設我們已經知道某某某 API 路徑，例如刪除帳號的API https:/www.example.com/delete?id=XXX，然後黑客就傳給你一個句話「快看!點這個網址可以取得一個比特幣」(屁)

1
<a href="https:/www.example.com/delete?id=1">取得比特幣</a>

接下來你不疑有他就直接點了，當網站沒有做好 CSRF 防禦的時候，網站就只會知道說 「哦~你有我網站的 cookie & session，所以你要刪除 id = 1 的帳號是嗎?沒問題」就這樣網站不疑有他的把第一筆帳號刪除了，那麼為了避免這個狀況發生，那就要在網站上加入一個 CSRF 的防禦，當資料往後端時還必須帶上一組亂碼(類似 hash) 驗證沒問題我才會讓你執行，但是這一串數字並不是隨便帶都可以，而是要由瀏覽器觸發後端往前端傳才可以。

更詳細可以看 這篇

防禦 CSRF

Express 中其實有一個套件可以拿來防禦 CSRF 的問題，所以首先要先安裝一個套件，它叫做 CSURF

1
npm install --save csurf

引入方式也是一樣簡單

1
var csurf = require('csurf')

CSURF 它是會驗證 Cookie 所以是必須要有 var cookieParser = require('cookie-parser')

那使用方式其實很簡單，它採用 middleware 的作法

(以下摘錄官方文件)

1
2
3
4
5
6
7
8
9
10
var csrfProtection = csrf({ cookie: true })

app.get('/form', csrfProtection, function (req, res) {
  // pass the csrfToken to the view
  res.render('send', { csrfToken: req.csrfToken() }) // 傳給 View csrf 的 token
})

app.post('/process', parseForm, csrfProtection, function (req, res) {
  res.send('data is being processed')
})

另外還有一個重點，在表單傳送上也必須夾帶 CSRF 的資訊

1
2
3
4
5
6
<form action="/process" method="POST">
  <input type="hidden" name="_csrf" value="{{csrfToken}}"> // name="_csrf" 與 {{csrfToken}} 是重點
  
  Favorite color: <input type="text" name="favoriteColor">
  <button type="submit">Submit</button>
</form>

補充

注意若使用了 CSURF 之後 PostMan 就會無法動作唷~

0%