CSRF token validation for CORS

Using Django Forms & APIs
1

I have a ReactJS application deployed on one domain(abc.com) and a Django server is deployed on another domain(xyz.com). I have added a separate call to get the csrf token in Django as follows-

def csrf(request):
    return JsonResponse({'csrfToken': get_token(request)})

When i call this API i get a Set-cookie response header which has a different csrftoken value as the json response from this API-

Set-Cookie: csrftoken=0b6qbRmAyF8QITIHbvFT2gGFOB98Vzg7cCRWvFWn2zzRbLon4BduX3P0orRX5Afh; expires=Tue, 01 Mar 2022 10:33:18 GMT; Max-Age=31449600; Path=/; SameSite=None; Secure

Whereas the response has the following csrf(which i save as cookie)-

{"csrfToken": "mMPB6X86ZzsS6T2rg1AN0e8MhG9raEn6ydA7qLITttTTzLI7978oV1h7RwRgkFmg"}

i need to send the csrftoken in the post call as well as a cookie and i cannot access the token sent in the cookie because it is of different domain (CORS) and neither can i overwrite that record. If i set

credentials: 'include',

in my fetch call and send the csrftoken in form data or as a request header(X-CSRFToken) then the call has the cookie sent to me as the cookie itself (0b6qbRmAyF8QITIHbvFT2gGFOB98Vzg7cCRWvFWn2zzRbLon4BduX3P0orRX5Afh) and the header/form data csrf as the one sent as json(mMPB6X86ZzsS6T2rg1AN0e8MhG9raEn6ydA7qLITttTTzLI7978oV1h7RwRgkFmg) and i get a 403 error with the message-

CSRF verification failed. Request aborted.

In my local system it works well because the cookie recieved from server is (most probably) overwritten by the one in json because both applications run on localhost and the same csrf is sent in all the places(cookie and form data/request header). How can the same result be achieved with different domains?

2

Django CORS headers is a package written by a fellow Django Forum user which does what I think you’re after.

I remember stumbling over this issue when I started working with an SPA architecture and I still have this comment in my code:

# CORS Headache

The above package solved my woes, quick smart.

3

I am relatively new to Django. This is actually my first project that i am using it in. I had already installed the cors header package. I also added the following in my settings.py -
CORS_ORIGIN_WHITELIST = [URL]

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL=True

CSRF_TRUSTED_ORIGINS = [URL]

MIDDLEWARE = [
‘corsheaders.middleware.CorsMiddleware’,
…
]

INSTALLED_APPS = [
…
‘corsheaders’,
…
]

CSRF_COOKIE_SECURE = True

CSRF_COOKIE_SAMESITE = ‘None’
And i am still getting the same problem as i described above

4

Was the problem solved? I encounter the same situation which separate client and server in two different origin

5

If you also want to use django-cors-headers here is reference as previously suggested django-cors-headers · PyPI
But if you have another issue than kindly create another topic with the issue and post related code there.