title: Express.js csrf token with jQuery Ajax
body: <p>I am trying to implement csrf protection into my project but I can't make it work with jQuery Ajax. (It works with normal posts requests, though) </p>
  
  <p>If I tamper the token using chrome dev tools before I send the form, I still see "data is being processed" text rather than <code>invalid csrf token</code> error.</p>
  
  <p>app.js</p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var favicon = require('serve-favicon');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var csrf = require('csurf');
  var bodyParser = require('body-parser');
  var router = express.Router();
  var app = express();
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'jade');
  //app.set('strict routing', true);
  app.set('view options', {layout: false});
  
  app.use(logger('dev'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: false}));
  app.use(cookieParser());
  
  var csrfProtection = csrf({ cookie: true });
  var parseForm = bodyParser.urlencoded({ extended: false });
  
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.get('/form', csrfProtection, function(req, res) {
      // pass the csrfToken to the view
      res.render('send', { csrfToken: req.csrfToken() });
  });
  
  
  app.post('/form', parseForm, csrfProtection, function(req, res) {
      res.send('data is being processed');
  });
  
  
  // development error handler
  // will print stacktrace
  if (app.get('env') === 'development') {
      app.use(function (err, req, res, next) {
          res.status(err.status || 500);
          res.render('error', {
              message: err.message,
              error: err
          });
      });
  }
  
  // production error handler
  // no stacktraces leaked to user
  app.use(function (err, req, res, next) {
      res.status(err.status || 500);
      res.render('error', {
          message: err.message,
          error: {}
      });
  });
  
  module.exports = app;
  </code></pre>
  
  <p>send.jade</p>
  
  <pre><code>html
      head
          meta(name='_csrf', content='#{csrfToken}')
      body
          form(action='/form', method='POST')
              |   Favorite color:
              input(type='text', class="favori", name='favoriteColor')
              button(type='submit') Submit
      script(src="javascripts/frontend/jquery/jquery-3.0.0-alpha1.js")
      script(src="javascripts/test.js")
  </code></pre>
  
  <p>test.js</p>
  
  <pre><code>$(document).ready(function () {
  
      $.ajaxSetup({
          headers: {'X-CSRF-Token': $('meta[name="_csrf"]').attr('content')}
      });
  
      $('button').click(function (e) {
          e.preventDefault();
          var text = $('.favori').val();
          alert(text);
          $.post(
              "/form",
              {
                  text: text
              }, function (data) {
                  console.log(data);
              });
      });
  });
  </code></pre>