Error: CSRF token missing, hackathon-starter plus AngularJS

Question

I'm integrating AngularJS into hackathon-starter. It was done as I mentioned it here with the following test.html and test.controller.js

<div>
 The record: {{record}}
</div>
<div align="right">
 <button class="btn btn-lg btn-primary" ng-click="createRecord()" onclick="window.location.href='/order/shipping'">
 <i class=""> Create record</i>
 </button>
</div>

test.controller.js

(function () {
'use strict';
var injectParams = ['$scope', '$location', '$http'];
function TestController($scope, $location, $http) {
 $scope.record = {
 interId: 1,
 sku: '107k',
 category: 'Useful'
 };
 function createRecord(record) {
 return $http.post('/order/create', record).then(function (response) {
 return response.data;
 })
 }
 $scope.createRecord = function () {
 var record = $scope.record;
 createRecord(record)
 .then(function (data) {
 if (data.success) {
 return $location.url('/shipping');
 }
 alert('Something wrong...');
 });
 }
};
TestController.$inject = injectParams;
angular.module('miniApp')
 .controller('TestController', TestController);
}());

It works if the value for csrf is set to false, like:

 app.use(lusca({
 csrf: false,
 xframe: 'SAMEORIGIN',
 xssProtection: true }));

When the value for csrf is set to true, than there is the error: Error: CSRF token missing

One of the options to solve this problem is to put request for '/order/create' path before the lusca configuration, like:

app.post('/order/create', passportConf.isAuthenticated, orderController.postCreateOrder);
app.use(lusca({
csrf: true,

...

But this solution is not quite elegant.

Another option would be to whitelist dynamic URLs using regular expression inside the CSRF middleware. I tried this approach but I lack of experience how to do it properly. How to solve this problem with whitelisting (concrete example)?

I could be wrong, but it should be possible to pass the csrf within test.controller.js. How to do it I don't know. So, it would be nice if somebody would provide concrete example.

A solution with the whitelisting would be excepted because I couldn't figure out how to make it work.

Answer 1

From what I can tell lusca doesn't have any easily configurable CSRF whitelisting built in, and neither does the hackathon-starter. From the way your linked article is phrased it sounds like they want you to do the whitelisting yourself in your own custom middleware. To do this, I think you might need to abandon your app.use(lusca({})) call and instead app.use() each lusca middleware individually, like so:

var csrfMiddleware = lusca.csrf();
app.use(function(req, res, next) {
 // Paths that start with /foo don't need CSRF
 if (/^\/foo/.test(req.originalUrl)) {
 next();
 } else {
 csrfMiddleware(req, res, next);
 }
});
app.use(lusca.csp({ /* ... */}));
app.use(lusca.xframe('SAMEORIGIN'));
app.use(lusca.p3p('ABCDEF'));
app.use(lusca.hsts({ maxAge: 31536000 }));
app.use(lusca.xssProtection(true));