這是在講關於一名叫 Koa 的全端勇士傳說-CSRF

前言

這一篇將會講解 CSRF 的安裝使用,koa 官方也有提供相關的 csrf 套件,這一篇就來記錄一下該如何使用吧~

起手式

首先安裝 CSRF 套件

1
npm install koa-csrf

使用方式

安裝完畢後就引入套件,我們可以依照官方範例來撰寫,但是這邊要寫在 Route 中

1
2
3
4
5
6
7
8
const CSRF = require('koa-csrf');
// 添加 CSRF 相關設置
app.use(new CSRF({
invalidTokenMessage: 'Invalid CSRF token',
invalidTokenStatusCode: 403,
excludedMethods: [ 'GET', 'HEAD', 'OPTIONS' ],
disableQuery: false
}));

※這邊要注意一件事情 CSRF 功能必須依賴 session 套件,所以若沒有 session 套件將無法使用唷

接下來開啟 EJS,主要會新增一個隱藏欄位,並傳入 CSRF 等

EJS 版本

1
<input type="hidden" name="_csrf" value="<%= csrf %>" />

PUG 版本

1
input(type='hidden', name='_csrf', value=csrf)

route 修改

接下來必須針對 route 做一些修正,否則該怎麼傳入 CSRF?

CSRF

接下來就可以看看隱藏欄位是否已經傳入 CSRF 囉

CSRF

如果沒有 CSRF欄位那就會出現 CSRF 錯誤

CSRF 錯誤

最後這邊補上 route 完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const router = require('koa-router')();
const CSRF = require('koa-csrf');
const csrfMD = new CSRF({
invalidSessionSecretMessage: 'Invalid session secret',
invalidTokenMessage: 'Invalid CSRF token',
invalidTokenStatusCode: 403,
});

router
.get('/',csrfMD,async (ctx, next) => {
ctx.cookies.set('cid','1234', cookieSet);
await ctx.render('index', {
title: 'EJS !',
csrf: ctx.csrf
});
})
.post('/post', csrfMD ,async (ctx, next) => {
console.log(ctx.method);
ctx.session.email = ctx.request.body.email;
ctx.session.name = ctx.request.body.name;
ctx.redirect('/');
})

module.exports = router;
0%