CSRF token mismatch for ajax post using nodejs express

Question

Environment: express 4, jquery, krakenjs, font-awesome

In controllers/products/index.js

module.exports = function (router) {
    router.post('/add',function(req,res){
        // do something
    });
};

In the html file, users click the icon and add the products into the cart

{?products}
    {#products}
        <ul id="{.id}">
            <li class="add"><i class="fa fa-plus"></i></li>
        </ul>
    {/products}
{/products}

For each product, the following script is to do the ajax post to backend.

$('.add').click(function(e){
       var _id = this.parentElement.id;
       $.ajax({
           url: "/products/add",
           type: 'POST',
           contentType: 'application/json',
           dataType: 'json',
           data: JSON.stringify({
             id: _id
           })
       });
 });

The server then responds 500 (Internal Server Error) and states 'Error: CSRF token mismatch'. Do I need to insert the csrf token in ajax post or eliminate the token validation when doing ajax call without a form submission.

Answer 1

Krakenjs uses Lusca for crsf protection.

Lusca stores the crsf _token in req.locals.

Also, set the crsf token in the view as a hidden / data-attribute and include that as a part of the ajax post.

Answer 2

you should insert a csrf token in you ajax post.

if you use a express csrf middleware, then there would be a variable in the req, like req.csrfToken()(using csurf middleware) or something.

print this variable in the output html and use javascript to get it.

For best practice,

1. make this variable a front-end global variable. so we can retrieve it easily.
2. set csrf token in ajax header but not in form data. and register this behavior to jquery event. see http://erlend.oftedal.no/blog/?blogid=118