CODEWITHSUNDEEP
jqueryajaxnode.jscsrfkraken.js
tony.0919
tony.0919

Reputation: 1203

CSRF token mismatch for ajax post using nodejs express

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.

Upvotes: 3

Views: 2704

Answers (3)

Mohamed Shakir
Mohamed Shakir

Reputation: 43

You need to add a header "X-XSRF-TOKEN" with the proper TOKEN to you POST request.

This worked for me:

$.ajaxSetup({
        beforeSend: function (xhr) {
          xhr.setRequestHeader("X-XSRF-TOKEN", $cookies.get("XSRF-TOKEN"));
        }
      });

$.ajax({
        type: "POST",
        url: "/api/endpoint",
        data: formData, 
        cache: false,
        contentType: false,
        processData: false,
        success: function(data)
        {
          alert(data); // show response from the upload response.
        }
      });

Upvotes: 0

Swaraj Giri
Swaraj Giri

Reputation: 4037

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.

Upvotes: 4

alsotang
alsotang

Reputation: 1605

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

Upvotes: 2

Related Questions