CSRF token in SPA login JSON response?

Question

Is it safe to include the CSRF token as part of an HTTPS successful login JSON response in an SPA? If not, is there a better mechanism for sending it which avoids the Double Submit Cookie pattern?

Some background:

I am building an SPA application (Node/React) which communicates HTTPS with a JSON API backend and I am trying to determine if sending the CSRF token from the server in the login response JSON is a safe thing to do.

I have researched OWASP's suggestions for sending a CSRF token from the server that states:

The CSRF token can be added through hidden fields, headers, and can be used with forms, and AJAX calls

However this does not seem to address SPA concerns. I have also found that the Angular framework uses the Double Submit Cookie pattern, but sources (including OWASP's) indicate this is a less secure approach.

OWASP has also suggested including it in the DOM in a meta tag, however since it should only be issued to authenticated users, I thought it made more sense to include it with the successful login JSON response.

Is this a safe approach to sending a CSRF token? Thanks in advance.

Answer 1

Yes. In CSRF attacks, the attacker can submit data but not read data. Normally, the CSRF value is contained in a HTML response, and including it in a JSON response it similar.

Make sure that the response can't be read by cross-origin hosts. This is the case by default, but if you have CORS headers (e.g. Access-Control-Allow-Origin response header) you may have disabled this.

You set the CSRF token as response to the login request. This makes me think that the login request itself does not have CSRF protection. You may want to consider protecting the login against CSRF.

Also, if you use cookie-based authentication I would recommend SameSite cookies, which solve CSRF and related problems. In addition, you may want to check the value of the Origin header if it's present in requests.