用過Koa的碼農都知道,在Koa中獲取POST提交的數據需要配置第三方的中間件,而Egg繼承於Koa,在這一方面做了優化,獲取POST提交的數據不需要再配置其它的中間件了,並添加了安全機制 CSRF 的防範,在Egg中獲取用戶提交的POST數據主要有以下兩種方法。
第一種:在用戶訪問需要POST提交數據的頁面時,返回CSRF密鑰,當用戶提交數據時,將CSRF密鑰一起返回,以下是具體的實現。
1. 在router.js中配置路由。
'use strict';
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.post('/add', controller.home.add);
};
2. 在config文件夾下的config.default.js 中配置模板引擎。
'use strict';
module.exports = appInfo => {
const config = exports = {};
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1532511512428_3477';
// add your config here
config.middleware = [];
// 配置模板引擎
config.view = {
mapping: {
'.html': 'ejs',
},
};
return config;
};
3. 在controller中定義控制器文件home.js,並添加控制器方法。
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
// this.ctx.csrf 用戶訪問這個頁面的時候生成一個密鑰
await this.ctx.render('home', {
// 將密鑰返回用戶端,讓用戶提交後返回
csrf: this.ctx.csrf
});
}
// 接收post提交的數據
async add() {
console.log(this.ctx.request.body);
}
}
module.exports = HomeController;
4. 在view中定義模板文件home.html,並在表單地址中綁定服務端返回的csrf,當用戶提交時與其它數據一起回傳。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<!-- 將csrf的值拼接在地址後面,提交時回傳 -->
<form action="/add?_csrf=<%=csrf%>" method="POST">
用戶名: <input type="text" name="username"/><br><br>
密 碼: <input type="password" name="password" type="password"/><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
第二種:在中間件中配置全局的CSRF密鑰,在需要提交POST數據的頁面添加一個隱藏表單域,當用戶提交時,將CSRF密鑰一起返回,以下是具體的實現。
1. 在router.js中配置路由。
'use strict';
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.post('/add', controller.home.add);
};
2. 在config文件夾下的config.default.js 中配置模板引擎與中間件。
'use strict';
module.exports = appInfo => {
const config = exports = {};
// use for cookie sign key, should change to your own and keep security
config.keys = appInfo.name + '_1532511512428_3477';
// 配置設置全局csrf的中間件
config.middleware = ['auth'];
// 配置模板引擎
config.view = {
mapping: {
'.html': 'ejs',
},
};
return config;
};
3. 在controller中定義控制器文件home.js,並添加控制器方法。
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
async index() {
// 渲染home.html模板文件
await this.ctx.render('home');
}
// 接收post提交的數據
async add() {
console.log(this.ctx.request.body);
}
}
module.exports = HomeController;
4. 在view中定義模板文件home.html,用隱藏表單域綁定服務端返回的csrf,當用戶提交時與其它數據一起回傳。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<form action="/add" method="POST">
<!-- 用隱藏表單域綁定全局的csrf -->
<input type="hidden" name="_csrf" value="<%=csrf%>">
用戶名: <input type="text" name="username" /><br><br>
密 碼: <input type="password" name="password" type="password" /><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
5. 在middleware中定義中間件文件auth.js,配置全局的csrf。
module.exports=(option,app)=>{
return async function auth(ctx,next){
// 設置模板全局變量
ctx.state.csrf=ctx.csrf;
await next();
}
}