title: express csurf (csrf middleware) not working with XSRF in angularjs
body: <p>Express and Angular both have their own csrf middleware. I cannot get them to work at all and there does not seem to be any coherent guide on the internet about this. My understanding is that express 4.0 uses csurf as its csrf middleware, and I have to set <code>X-XSRF-TOKEN</code> on angularjs.</p>
  
  <p>There are scattered pieces about how to do this, with information that sometimes conflict:</p>
  
  <p><a href="https://stackoverflow.com/questions/18773846/how-to-test-endpoints-protected-by-csrf-in-node-js-express">How to test endpoints protected by csrf in node.js/express</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16663574/angular-django-and-csrf">angular, django and csrf</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27910409/csurf-angular-implementation">CSURF Angular Implementation</a></p>
  
  <p>But I have tried them and they do not work. My <code>_csrf</code> is always <code>undefined</code> on the Angular clientside, and csurf always gives <code>success</code> despite no csrf token was given from the client.</p>
  
  <p>Furthermore, I am using <code>express-jwt</code> to keep user session, so I am unsure if this will interfere with <code>cookie-session</code> (required by curf).</p>
  
  <p>Here is my simple angular/express app for handling register with csrf (not working):</p>
  
  <p><strong>angular app.js</strong></p>
  
  <pre><code>var app = angular.module('app', ['ngCookies', 'ui.router']);
  
  app.config(function($stateProvider) {
      $stateProvider.state('register', {
          url: '/register',
          controller: 'RegisterCtrl',
          templateUrl: 'views/register.html'
      });
  });
  
  // register csrf
  app.run(['$http', '$cookies', function($http, $cookies) {
      $http.defaults.headers.post['X-XSRF-TOKEN'] = $cookies.csrftoken;
  }]);
  
  // controller
  app.controller('RegisterCtrl', ['$scope', '$cookies', '$http', 
      function($scope, $cookies, $http) {
          $scope.data = { email: "", password: "", _csrf: $cookies._csrf};
  
          $scope.submitForm = function() {
              // This will alert 'undefined'
              alert("This is csrf token: " + $scope.data._csrf);
  
              $http.post('/register', data).success(function(done) {
                 console.log('success');
                 var jwt_token = done["jwt_token"];
                 // save token to local storage.
              }).error(function(err) {
                 console.log('error');
              });
          }
      }
  ]);
  </code></pre>
  
  <p><strong>express app.js</strong></p>
  
  <pre><code>var express = require('express');
  var app = express();
  var http = require('http').Server(app);
  var expressJwt = require("express-jwt");
  var bodyParser = require('body-parser');
  app.use(bodyParser.urlencoded({extended: true});
  app.use(bodyParser.json());
  
  // csrf setup
  var session = require('cookie-session');
  var csrf = require('csurf');
  app.use(session({
      secret: 'keyboard cat'
  }));
  app.use(csrf());
  // This part taken from csurf guide:
  // https://github.com/expressjs/csurf
  app.use(function(err, req, res, next) {
      if (err.code !== 'EBADCSRFTOKEN') return next(err)
      res.status(403);
      res.send('session has expired or form tampered with');
  });
  
  app.post("/login", function(req, res) {
      var email = req.body.email;
      var password = req.body.password;
  
      // save user to db ...
      var jwt_token = // create and sign jwt token to be given back to registered user
  
      res.json({"jwt_token": jwt_token});
  });
  
  http.listen(3000, function() {
     console.log("Express started");
  });
  </code></pre>
  
  <p>Now, if I submit the register form, the <code>alert()</code> will say the <code>_csrf</code> is <code>undefined</code>. On the expressjs side, <code>app.post('/login')</code> is run all the way through without having failed even though the csrf token should be bad (<code>undefined</code> since csrf on angular side is not working). This indicates that <code>csurf</code> is not working at all on the express side.</p>
  
  <p>Can someone provide an <strong>in-depth</strong> explanation to integrating <code>csurf</code> in express 4.0, xsrf in Angular, and have them work together?</p>