CSRF Tokens Not Working for Vue SPA and Flask REST API

[athshean]

Hello,

I am trying to create an app that uses a REST API as a back end, and a Vue front end. I am trying to use Flask Security for both basic and token-based authentication, as well as CSRF protection. This is where I seem to be struggling, and I'd really appreciate some helm.

I followed the example for configs given in the docs, and I have read through the various patterns. So far, I seem unable to be able to get CSRF protection to work. I have set up Flask-Security to pass the CSRF token as a XSRF-Token cookie. I use Axios to make a Get request to retrieve a csrf token from the login page, but even when I get Axios to return the token as a X-XSRF-Token header, I still get 'csrf token is missing' as an error on the form.

My configs for Flask-Security are as follows:

    # enforce CSRF protection for session / browser - but allow token-based
    # API calls to go through
    SECURITY_CSRF_PROTECT_MECHANISMS = ["session", "basic"]
    SECURITY_CSRF_IGNORE_UNAUTH_ENDPOINTS = True

    # Send Cookie with csrf-token. This is the default for Axios and Angular.
    SECURITY_CSRF_COOKIE_NAME = "XSRF-TOKEN"
    SECURITY_CSRF_HEADER = "X-Xsrf-Token"
    WTF_CSRF_CHECK_DEFAULT = False
    WTF_CSRF_TIME_LIMIT = None

My preferred implementation would be to not use the default endpoints provided by Flask-Security, and instead define my own endpoints. Any suggestions about what I may be doing wrong, and what I may have missed?

[jwag956]

Nothing immediately pops out - however - you should only need to use one mechanism - either a cookie or a GET to fetch the CSRF token.
You don't show it in your config - but I assume you are calling: flask_wtf.CSRFProtect(app) PRIOR to initializing Security this is important in 5.0.0
Also - please include which versions of Flask-Security-Too, Flask, and Werkzeug you are using.

As to your 'preferred' implementation - what exactly do you mean by 'default endpooints'> Are you just referring to the endpoint names e.g. /login or to the views/forms behind them? Endpoint names can easily be changed.

[patrickyan]

I am having a similar problem with a Next.js/React frontend and the Flask-Security JSON API. Frontend is running on 127.0.0.1:3000 and flask backend is running on 127.0.0.1:5000 and is being accessed via Next.js built-in proxy that serves it under /api.

I cannot get Flask-Security to set a XSRF-Token cookie. My setup is almost identical to the docs except for a few things. Settings were copied exactly into my Flask settings file.

CSRFProtect is initialized before Flask-Security.

Flask-CORS docs says it takes a list for expose_headers, so I changed that comma delimited string to a list.

cors = CORS(
	supports_credentials=True,  # needed for cross domain cookie support
	resources="/*",
	allow_headers="*",
	origins=['http://127.0.0.1:3000','http://127.0.0.1:5000'],
	expose_headers=['Authorization','Content-Type','Authentication-Token','XSRF-TOKEN','X-XSRF-TOKEN'],
	)

It seems like the CORS settings are active, because in my console under network, I see the response headers has Access-Control-Expose-Headers, Access-Control-Allow-Credentials, and Access-Control-Allow-Origin.

My axios request is pretty basic:

	const onSubmit = async (data) => {
		await axios.post('/api/accounts/register', data)
			.then((response) => {
				console.log(response);
				router.push('/test');
			})
			.catch((e) => {
				const response = e.response;
				const result = ('data' in response) ? response.data : null
				console.log(result);
				if ('field_errors' in result.response) {
					addServerErrors(result.response.field_errors, setError);
				}
			});

		return false;
	}

In network console, I can see that a session cookie is set with HttpOnly. There is no XSRF-Token cookie set.

The Flask-Security user registration process happens with no problem.

Since CSRF token is returned in the body of the register form, I'm guessing I could just save that in a cookie client side, but I would like to use the actual features of Flask-Security.

[jwag956]

The XSRF-Cookie is only set once the user has successfully logged in (and presumable you have SECURITY_CSRF_IGNORE_UNAUTH_ENDPOINTS=True set as the docs suggest). So you should see that cookie set in the response from /login.

[patrickyan]

Confirmed that this is correct. Thanks!