Node JS / Angular 2 application , ForbiddenError: invalid csrf token - node.js

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.