示例

首先我们通过如下示例来看一下SPA(单页面应用)的CSRF攻击

服务

cnpm i -g egg-init

egg-init --type=simple saas-server

cd saas-server && cnpm i

cnpm run dev

vim app/router.js

'use strict';

let count = 0;

module.exports = app => {
  const { router } = app;
  router.post('/login', async ctx => {
    ctx.session.user = 'user';
    ctx.body = { message: 'login success' };
    ctx.status = 200;
  });
  router.post('/count', async (ctx, next) => {
    if (!ctx.session.user) {
      ctx.body = { message: 'need login' };
      ctx.status = 403;
      return;
    }
    await next();
  }, async ctx => {
    ctx.body = { message: 'count ' + count++ };
    ctx.status = 200;
  });
};

vim config/config.default.js

'use strict';

module.exports = appInfo => {
  const config = exports = {};

  config.keys = appInfo.name + '_1533543342201_7043';

  config.middleware = [];

  config.security = {
    csrf: {
      enable: false,
    },
  };

  return config;
};

测试

curl -X POST localhost:7001/count # {"message":"need login"}

curl -c cookies -X POST localhost:7001/login # {"message":"login success"}

curl -b cookies -X POST localhost:7001/count # {"message":"count 0"}

跨域

cnpm i --save egg-cors

vim config/plugin.js

'use strict';

exports.cors = {
  enable: true,
  package: 'egg-cors',
};

vim config/config.default.js

'use strict';

module.exports = appInfo => {
  const config = exports = {};

  config.keys = appInfo.name + '_1533543342201_7043';

  config.middleware = [];

  config.security = {
    csrf: {
      enable: false,
    },
  };

  config.cors = {
    credentials: true,
    origin: 'http://localhost:8080',
    allowMethods: 'HEAD,OPTIONS,GET,PUT,POST,DELETE,PATCH',
  };

  return config;
};

前端

cnpm i -g @vue/cli

vue create saas-client

cd saas-client

yarn serve

vim src/App.vue

<template>
    <div id="app">
        <div>
            <button v-on:click="login">登录</button>
            <a>{{message1}}</a>
        </div>
        <div>
            <button v-on:click="count">计数</button>
            <a>{{message2}}</a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {
            message1: '',
            message2: '',
        }
    },
    methods: {
        login() {
            fetch('http://localhost:7001/login', { method: 'POST', credentials: 'include' })
                .then(res => {
                    return res.json();
                }).then(json => {
                    this.message1 = json;
                }).catch(error => {
                    this.message1 = error;
                });
        },
        count() {
            fetch('http://localhost:7001/count', { method: 'POST', credentials: 'include' })
                .then(res => {
                    return res.json();
                }).then(json => {
                    this.message2 = json;
                }).catch(error => {
                    this.message2 = error;
                });
        },
    }
}
</script>

<style>
</style>

测试

使用浏览器打开http://localhost:8080

点击"登录"和"计数"按钮后效果如下

spa-csrf-01.png

攻击

vue create csrf-client

cd csrf-client

yarn serve

vim src/App.vue

<template>
    <div id="app">
        <form action="http://localhost:7001/count" method="POST">
            <input type="submit" value="点击中大奖">
        </form>
    </div>
</template>

<script>
export default {
    name: 'app',
}
</script>

<style>
</style>