egg学习笔记(4)--安全机制csrf

ゝ一世哀愁。 2022-03-01 15:56 393阅读 0赞

## 简介 ##

CSRF 攻击：伪造用户请求向网站发起恶意请求。

#### 目录结构 ####

![clipboard.png][]

## controller ##

//controller/postsafe.js

'use strict';
    
    const Controller = require('egg').Controller;
    
    class PostsafeController extends Controller {
      async index() {
        await this.ctx.render('postsafe')
      }
      async post(){
          let bodydata = this.ctx.request.body;
          console.log(bodydata)
      }
    }
    
    module.exports = PostsafeController;

## router ##

//router.js

router.get('/postsafe', controller.postsafe.index);
      router.post('/postsafe', controller.postsafe.post);

## middleware ##

//middleware/auth.js

module.exports = (options,app) => {
        return async function auth(ctx,next){
            ctx.state.csrf = ctx.csrf;
            await next()
        }
    }

//config/config.default.js

config.middleware = ['printdate','forbidip','auth'];

## view ##

//view/postsafe.html

<!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">
        <title>Document</title>
    </head>
    <body>
        <form action="/postsafe?_csrf=<%= csrf %>" method="POST">
            
            <div>
                <span>用户名</span>
                <input type="text" name="username">
            </div>
            <div>
                <span>密码</span>
                <input type="password" name="password">
            </div>
            <button type="submit">提交</button>
        </form>
    </body>
    </html>

## 页面效果 ##

![clipboard.png][clipboard.png 1]

![clipboard.png][clipboard.png 2]

![clipboard.png][clipboard.png 3]

去掉csrf

![clipboard.png][clipboard.png 4]

[clipboard.png]: /images/20220301/5473523d22624194af49ff0af13c2301.png
[clipboard.png 1]: /images/20220301/ef0b322b15944c24b4e41ee4fe6e82a2.png
[clipboard.png 2]: /images/20220301/8c6983171601422aaa953013508d08a5.png
[clipboard.png 3]: /images/20220301/b0f297b688fd41c49d2ea710f50864d3.png
[clipboard.png 4]: /images/20220301/c03ac4ed4d95436da99990580f1fe8d1.png