How do I get the CSRF token from the request body?

joegalley commented 7 years ago

Looking at these lines: https://github.com/koajs/csrf/blob/master/src/index.js#L59-L60 when I'm debugging, ctx.request.body is always undefined. I don't know why. Can anyone help?

Something else: at the same breakpoint as above, ctx.csrf IS defined. Should I just be using ctx.csrf as the token? I'm confused as to why ctx.csrf isn't already treated as the token.

stephenmathieson commented 7 years ago

Regarding ctx.request.body, see https://github.com/koajs/csrf/blob/2.x/index.js#L104-L106. It's provided by the bodyparser middleware. Note that you are not required to use the bodyparser middleware for koa-csrf to work. For some reason, when the next branch was merged, none of the helpful contextual comments were carried over. Sorry about that.

The particular line you've highlighted is checking to see if a _crsf field was provided in the body of the request. This is used to assert that a token was provided and is valid.

Closing for now. Reopen/respond if I haven't clarified this for you.

joegalley commented 7 years ago

Since it seems like you're only looking for csrf in the request body, as a query param, or in a header, I can't actually get it to verify my token (since it's in ctx.csrf and not one of these places).

joegalley commented 7 years ago

Is this the approach I should be taking to move the csrf variable from ctx to ctx.body (and thus have the koa-csrf middleware be able to read it?

From the README:

// your middleware here (e.g. parse a form submit)
app.use((ctx, next) => {

if (![ 'GET', 'POST' ].includes(ctx.method))
    return next();

  if (ctx.method === 'GET') {
    ctx.body = ctx.csrf;
    return;
  }

  ctx.body = 'OK';

});

I didn't put anything in my server's index.js file for csrf stuff, but it seemed to send a csrf token on every POST request anyway. So I'm not really sure if I need to add anything else..

I do think a "real" example would be helpful here

stephenmathieson commented 7 years ago

I'll throw an example together soon.

stephenmathieson commented 7 years ago

@joegalley super contrived example (will cleanup and add to the repo eventually):

const Koa = require('koa')
const Router = require('koa-router')
const session = require('koa-generic-session')
const bodyParser = require('koa-bodyparser')
const convert = require('koa-convert')
const CSRF = require('koa-csrf')

const app = new Koa();
const router = new Router()

app.keys = [ 'foo', 'bar' ];

app.use(bodyParser())
app.use(convert(session()));

router.get('/', (ctx, next) => {
  ctx.type = 'html'
  ctx.body = `
    <!doctype html>
    <html>
      <head>
        <title>koa-csrf example</title>
      </head>
      <body>
        <h1>koa-csrf example</h1>
        <form>
          <input type='hidden' name='_csrf' value='${ctx.csrf}' />
          <select>
            <option value='none'>no csrf</option>
            <option value='query'>query string csrf</option>
            <option value='body'>post body csrf</option>
            <option value='header'>header csrf</option>
          </select>
          <button type='submit'>submit</button>
        </form>
        <script>
          var form = document.querySelector('form')
          var select = form.querySelector('select')
          var csrf = form.querySelector('input[name="_csrf"]').value

          form.onsubmit = function (e) {
            e.preventDefault()

            var xhr = new XMLHttpRequest()
            var url = '/submit'
            var body

            var type = select.options[select.selectedIndex].value

            if (type === 'query') { // add the CSRF token to the query string when submitting the form
              url += '?_csrf=' + csrf
              xhr.open('POST', url)
            } else if (type === 'body') { // add the CSRF token in the POST body (requires using koa-bodyparser on the server)
              xhr.open('POST', url)
              xhr.setRequestHeader('content-type', 'application/json')
              body = JSON.stringify({ _csrf: csrf })
            } else if (type === 'header') { // add the CSRF token as a the header when submitting the form
              xhr.open('POST', url)
              xhr.setRequestHeader('x-csrf-token', csrf)
            } else if (type === 'none') { // do not add the CSRF token
              xhr.open('POST', url)
            }

            xhr.onreadystatechange = function (e) {
              if (xhr.readyState === XMLHttpRequest.DONE) {
                alert(xhr.responseText)
              }
            }

            xhr.send(body)
          }
        </script>
      </body>
    </html>
  `
})

router.post('/submit', (ctx, next) => {
  ctx.body = 'yay! you submitted a valid CSRF token!'
})

app.use(new CSRF())
app.use(router.routes())

app.listen(44567)

joegalley commented 7 years ago

Awesome, thanks for the example. It's very helpful

joegalley commented 7 years ago

Another question..

I'm using this with ReactJS, so I'm rendering React components via Ajax and I was thinking of adding the csrf token to the response body of my ajax requests, and putting the value into a hidden form field inside of my component. Does this make sense to do? Since I'm not rendering raw HTML and inserting the csrf token via a template variable, I can't think of any other good way to do this in React.

koajs / csrf

How do I get the CSRF token from the request body? #39