How to get XSRF token before first post request

[ghost]

Hi, I am trying to move authentication to my first loaded route -> '/' - the index page, and I have to send the post request twice because the XSRF token is missing. What should I change in the config of lusca?

app.use(lusca({ csrf: { angular: true }, xframe: 'SAMEORIGIN', hsts: { maxAge: 31536000, //1 year, in seconds includeSubDomains: true, preload: true }, xssProtection: true }));

[skrichten]

Same issue here. I even made an endpoint for the client to grab the token and I put it in the request header "X-XSRF-TOKEN". But I still get the error that the token is missing. In the Chrome console I can see it in the request. I'm not using angular in this case. Using jquery with some code something like this...

$.get('/token', function(resp){
  window.token = resp.token;
})

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    var token = readCookie("XSRF-TOKEN") || window.token;
    console.log(token);
    token = decodeURIComponent(token);
    xhr.setRequestHeader("X-XSRF-TOKEN", token);
  }
});

[atodicebear]

Is there any Progress in this? Some Cases for same Fail. https://github.com/angular-fullstack/generator-angular-fullstack/issues/2224

[jagzviruz]

I am having this same issue. On my express server I have this :

app.use(lusca({
      csrf: true,
      xframe: 'SAMEORIGIN',
      hsts: {
        maxAge: 31536000, //1 year, in seconds
        includeSubDomains: true,
        preload: true
      },
      xssProtection: true
    }));

In my client, I am using jQuery :

const xcsrf = readCookie('XSRF-TOKEN');
$.ajaxSetup({
      beforeSend: function(xhrObj){
        xhrObj.setRequestHeader('X-CSRFToken', xcsrf);
        xhrObj.setRequestHeader('X-CSRF-Token', xcsrf);
        xhrObj.setRequestHeader("X-XSRF-TOKEN", xcsrf);
      }
    });

On POST submission I get a Token mismatch error. Error: CSRF token mismatch

[radianz]

Are there any updates or fixes for this?

[daraosn]

Hi everyone!

This is NOT a problem of lusca, I debugged the whole middleware chain and found the issue on https://github.com/angular-fullstack, it's on server/config/express.js

if you replace..

app.use(express.static(app.get('appPath')));

with..

app.get('/assets/*', express.static(app.get('appPath')));

And then you `curl -s -v 'http://localhost:3000/', you will see the Set-Cookie with the CRSF token being set.

The problem is caused by index.html being served statically and breaking the middleware chain, so lusca is never called.. this also explains why / is never logged by morgan.

The fix described above is NOT correct though. It causes many other issues related to webpack... I played a lot trying to find a nice solution, and a simple solution that worked for me was to rename _index.html to app.template.html.

I pushed a pull request with the proper fix here https://github.com/angular-fullstack/generator-angular-fullstack/pull/2613