Node JS / Angular 2 application , ForbiddenError: invalid csrf token

Question

I am working on sample application using Node.js for server side and Angular 2 for front end.

To prevent CSRF attacks , I have used "csurf" middleware Below is the relevant code to set the middleware

// cookie parser
app.use(cookieParser());

// express session middleware , this should be after cookie parser
app.use(session({secret:'clickclick'}));

app.use(session({ 
secret: 'clickclick',
cookie: {
    path:'/',
    httpOnly:true,
    maxAge:null
}
}));

// CSRF middleware
app.use(csurf());

Below node.js route sets "_csrf" header

router.get('/:id/products/:pid' ,  wrap(function *(req , res , next) {

try 
{
    console.log('url' , req.url);
    res.setHeader('_csrf', req.csrfToken());
    let product = yield category.getProduct(req , res , next);
    res.send(product);
}
catch(err) 
{
    res.status(500).send(err);
}

})) 

The above mentioned route '/:id/products/:pid' is called from my below Angular 2 service method

// Get Product
GetProduct(id:string, pid:string):Observable<Product> {

    return this.http.get('./categories/' + id + '/products/' + pid)
                    .map(data =>{ let headers:Headers = data.headers; 
                                  this.csrfToken = headers.get('_csrf') ; 
                               return data.json() })
                    .catch(this.handleError);
}

This method assigns the _csrf header returned from server to "this.csrfToken" property.

And when the below service method makes an AJAX POST request , it uses the "this.csrfToken" property value set by above method and sets header "_csrf" value.

// Add an item to cart
 AddTocart(product:Product) 
 {
    let item = { pid:product._id , name:product.name , price:product.price , qty:1 , total:product.price  };   
    //this.cart.push(item);

    // make an AJAX call to save the item in server session
    let url = './cart/add';
    let headers = new Headers({'Content-Type':'application/json' , '_csrf':this.csrfToken});
    let requestOptions = new RequestOptions({headers:headers});

    this.http.post(url , item , requestOptions)
             .map(data => {                                
                            this.cart.push(item);
                          }
             )
             .catch(this.handleError)
             .subscribe( data => { });                

}

Below is the Response Header of GetProduct service method.

And below is the request Header of "AddTocart" service method.

Any idea what is causing "ForbiddenError: invalid csrf token" error. Please let me know if I need to provide more information or if the information provided is not clear.

Answer 1

I know this is an older question, but I'm adding this here in case someone stumbles across it in the future. Working on a similar project and encountered the same error, I fixed it by adding a XSRF-TOKEN header in the POST request, with the value taken from $.cookie("XSRF-TOKEN") (using jquery and the cookies plugin). According to the docs, _csrf should also work though.

From the project page :

The default value is a function that reads the token from the following locations, in order:

req.body._csrf - typically generated by the body-parser module.
req.query._csrf - a built-in from Express.js to read from the URL query string.
req.headers['csrf-token'] - the CSRF-Token HTTP request header.
req.headers['xsrf-token'] - the XSRF-Token HTTP request header.
req.headers['x-csrf-token'] - the X-CSRF-Token HTTP request header.
req.headers['x-xsrf-token'] - the X-XSRF-Token HTTP request header.

As far as I can tell, the error seems to come from POST / PUT requests including the correct cookies, but nodejs / csurf isn't looking for them there.

In your specific case, _csrf should be in the request body along with the cart items, or the header should be renamed to csrf-token, or one of the other options.