Flask POST requests fail when JWT_COOKIE_CSRF_PROTECT=True

Question

My POST requests to flask backend only work with JWT_COOKIE_CSRF_PROTECT = False, but GET requests work

config:

CSRF_ENABLED = True   
CORS_SUPPORTS_CREDENTIALS = True   
JWT_TOKEN_LOCATION = ['cookies']

I access flask through axios from the Vue app

  const path1 = `/limit_engine/balance`;
  axios
    .post(path1, { withCredentials: true })
    .then((response) => {
      console.log(response.data["balance"]);
    })
    .catch((error) => {
      console.error(error);
    });

https://flask-jwt-extended.readthedocs.io/en/stable/options/#jwt-cookie-csrf-protect suggests JWT_COOKIE_CSRF_PROTECT should be always True in production, so I cannot keep it False then

What error does it give you when you make a POST request? – Samuel O.D. Nov 24 '22 at 09:28 — Samuel O.D., Nov 24 '22 at 09:28

score 2 · Answer 1 · answered Nov 25 '22 at 21:43

Try to debug the request by examining headers. If you are sending requests from the browser, you can use any of Dev Tools (Chrome for example). Take a look at the Network tab, look for your POST request, find out which cookies are sent.

If you can't find CSRF token in the request then you should pass it from the backend to the frontend and keep it in cookies storage.

score 1 · Answer 2 · answered Jan 12 '23 at 15:23

After whole morning having trouble with this I realized CSRF token is only read from request headers as seen here: https://flask-jwt-extended.readthedocs.io/en/stable/_modules/flask_jwt_extended/view_decorators/ not from cookies, so in Vue you need to manually append this header to your requests.

Relevant source code to add to your flask app and to your Vue app:

In flask app:

app.config['JWT_ACCESS_CSRF_HEADER_NAME'] = "X-CSRF-TOKEN"
app.config['JWT_REFRESH_CSRF_HEADER_NAME'] = "X-CSRF-REFRESH-TOKEN"
app.config['JWT_CSRF_IN_COOKIES'] = False

In your flask app login function:

from flask_jwt_extended import (
jwt_required, create_access_token,
jwt_refresh_token_required, create_refresh_token,
get_jwt_identity, set_access_cookies,
set_refresh_cookies, get_raw_jwt, get_csrf_token
)

new_token = create_access_token(identity=current_user.id, fresh=False)
new_refresh_token=create_refresh_token(identity=current_user.id)
response = jsonify({
    'data': {
        'message':'Ok',
        'type': 'user',
        'id': current_user.id,
        'meta': {
            'accessToken': new_token,
            'access_csrf_token': get_csrf_token(new_token),
            'refreshToken': new_refresh_token,
            'refresh_csrf_token': get_csrf_token(new_refresh_token)
        }
    }
})
set_refresh_cookies(response, new_refresh_token)
set_access_cookies(response, new_token)
return (response)

In your Vue app in your login fuction "edit according if you use or not refresh token logic":

axios.defaults.headers.common['X-CSRF-TOKEN']=response.data.data.meta.access_csrf_token
axios.defaults.headers.common['X-CSRF-REFRESH-TOKEN']=response.data.data.meta.refresh_csrf_token

And lastly do the same in yout Vue TokenRefreshPlugin or the method you use

I guess there are more approaches like getting the CSRF headers from the cookies, but this one seems to work for me for now at least. The important point is adding this headers manually in Vue requests, because using axios.defaults.withCredentials = true is not enough.

Also check header includes csrf token in the requests as akdev suggests.

score 0 · Answer 3 · answered Nov 24 '22 at 10:13

0

you can add csrf exception for request.

or follow:- https://flask-jwt-extended.readthedocs.io/en/3.0.0_release/tokens_in_cookies/

answered Nov 24 '22 at 10:13

Ajay K

183
11

thanks what do you mean by exception – adam Nov 29 '22 at 20:25
it's decorator like @csrf_exception to avoid csrf token necessity – Ajay K Nov 30 '22 at 12:06

Flask POST requests fail when JWT_COOKIE_CSRF_PROTECT=True

3 Answers3