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

發表於 更新於 分類於
這一篇將會講解 CSRF 的安裝使用，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;