Egg.js 使用POST方式提交表单时的 CSRF 安全验证问题
诸彬郁
Egg.js 在使用POST方式提交表单数据时会自动进行 CSRF 安全验证，需要进行配置。参考：安全威胁 CSRF 的防范。
方法一：渲染表单时传入 csrf 值
- 配置 /app/router.js 文件
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
// 显示表单页面的路由
router.get('/postpage', controller.home.postpage);
// 提交表单数据的路由
router.post('/postInfo', controller.home.postInfo);
}- 配置 /app/controller/home.js 文件：
'use strict';
const { Controller } = require('egg');
class HomeController extends Controller {
// 显示表单页面
async postpage() {
const { ctx } = this;
// 显示表单页面，加载并渲染 HTML 模版文件
// ctx.csrf 是用户访问页面时生成的密钥，传递到渲染页面中去
await ctx.render('post/post.html', { csrf: ctx.csrf });
}
// 接收 post 提交的数据
async postInfo() {
const { ctx } = this;
// 获取打印 post 提交的数据
console.log(ctx.request.body);
ctx.body = 'post请求参数已打印';
}
}
module.exports = HomeController;- 配置 post.html 模版文件，在提交表单时，需要返回动态的 CSRF 值进行验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>这是表单页面：</h1>
<div>
<!-- egg.js新版本中使用 _csrf={{ ctx.csrf | safe }} 进行回传 csrf 值 -->
<form action="/postInfo?_csrf={{ ctx.csrf | safe }}" method="post">
用户名：<input type="text" name="username" /> <br /><br />
密码：<input type="password" name="password" /> <br /><br />
<button type="submit">提交</button>
</form>
</div>
</body>
</html>
类似资料：