How to add the CSRF token to a form submission in ApostropheCMS - csrf

Question

In the documentation is described how to exclude routes from CSRF protection, but I would prefer to include them. Is there a way to add the CSRF token into a hidden field, what name should it have?
Scanning through source code I only see a header that is added to AJAX calls, does this mean than in the current version regular POST calls aren't possible to make safe?

Answer 1

We could have allowed a hidden field to be used, but a hidden field is less safe than a header because a third party phishing site is permitted to submit regular POST forms, but it is not permitted to add HTTP headers to requests. So the standard protection covers you in two ways: (1) the attacker can't access the CSRF cookie, and (2) the attacker can't add a header either because only JavaScript can add headers and JavaScript is subject to the same-origin policy.
Thus using a jQuery form submission rather than "plain vanilla" POST is best practice for ApostropheCMS.
However jQuery form submissions are very easy anyway and they work better; you don't have to render an entirely new page for the user, for one thing.
Here is a simple example of jQuery code to enhance an ordinary HTML form:
$(function() {
var $myForm = $('.my-form');
$myForm.on('submit', function() {
$.post($myForm.attr('action'), $myForm.serialize(), function() {
// It worked, now display a thank you message, or navigate somewhere
}).fail(function() {
// An error was received, show the user a message etc.
});
// IMPORTANT: prevent the traditional submission
return false;
});
});
Here I am pulling the URL to POST the form to from the action attribute but you don't have to do that, you can use any URL that is set up to receive a POST form submission.
Note that I did not do anything special to get AJAX protection here. As long as you use jQuery's AJAX mechanisms (including $.post), it is automatic with ApostropheCMS.
You can fill in my success and fail functions here with code to show or hide messages already embedded in your page, etc.
Edit: here is a possible workaround to make it work the way you want it to.
// Browser-side JavaScript
$('form').each(function() {
$(this).append('<input type="hidden" name="xsrf-token" value="' + $.cookie(apos.csrfCookieName) + '" />');
});
Now, in lib/modules/your-module/index.js, you can supply middleware to put this hidden field where Apostrophe expects it:
self.expressMiddleware = {
when: 'beforeRequired',
middleware: function(req, res, next) {
if (!(req.body && req.body['xsrf-token'])) {
return next();
}
req.headers['X-XSRF-TOKEN'] = req.body['xsrf-token'];
return next();
}
};