# CSRF Cookie is not set with react frontend

**URL:** <https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509>\
**Category:** Templates & Frontend\
**Created:** [February 9, 2021, 6:46pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509 "2021-02-09T18:46:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 6:46pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/1 "2021-02-09T18:46:16Z")

</div>

Hi,

I’m facing an issue with handling the csrftoken sent by drf. though the csrftoken cookie is visible in the response header, it is not getting added to the cookies storage. I have tried all the possible SO answers, but none of them seems to work.

The flow consists of a get request to an endpoint “/get-csrf-token/” which will return a response “CSRF Cookie set”, in the response header the csrf cookie will be available. but the problem is, it is not getting stored. i have added below values settings.py

```
CSRF_USE_SESSIONS = False
CSRF_COOKIE_HTTPONLY = False       
CSRF_COOKIE_AGE = 8 * 3600           
CSRF_COOKIE_SECURE = False
CSRF_COOKIE_SAMESITE = 'Strict' ('lax' also doesn't work, 'None' results in error)

```

below is the view.py

```
@method_decorator(ensure_csrf_cookie, name='dispatch')
class getcsrf(APIView):
    permission_classes = [AllowAny]
    def get(self, request, format=None):
        return Response({'Success': 'CSRF Cookie set'})

```

urls.py  
`path('get-csrf-token/', getcsrf.as_view(), name='getcsrf')`

 ![request1](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/b/b0564a6e917f4c8feed2ea29a85ac1d18f795283.png)

If anyone could sort out the cause, it would be a great help. please do not suggest csrf\_exempt as an answer.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 6:57pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/2 "2021-02-09T18:57:04Z")

</div>

Are you sure this is a Django issue? It appears that you’re getting the cookie from the server. So my impression would be that it’s something in your JavaScript that you may need to do to save that cookie within your browser’s storage. (Or am I misunderstanding the information you’re providing here?)

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 7:05pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/3 "2021-02-09T19:05:01Z")

</div>

Hi Ken,

I have tried to send one more cookie but that also doesn’t seems to get stored.

```
@method_decorator(ensure_csrf_cookie, name='dispatch')
class getcsrf(APIView):
    permission_classes = [AllowAny]
    def get(self, request, format=None):
        resp=Response()
        resp.set_cookie("testing","testing_token",samesite="Strict")
        return resp

```

so none of the cookies get stored using set-cookie. If i hit the origin api endpoint from browser, the cookies are stored. But with react as front end, it is not all storing any cookies

 ![request2](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/e/e1d12c30d90ba0dbc81f4c98ed700f2b5f8fbe0a.png)

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 7:07pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/4 "2021-02-09T19:07:24Z")

</div>

So I’m interpreting this as saying that Django is working fine - it’s sending the cookie. It’s up to the browser to save it. How are you trying to save that cookie in React?

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 7:09pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/5 "2021-02-09T19:09:25Z")

</div>

react is not my cup of tea. front end is handled by someone else. So are you sure there is no issue with the backend?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 7:10pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/6 "2021-02-09T19:10:31Z")

</div>

About as sure as I can be. Django is sending the cookies - you’re seeing that. What the browser (and JavaScript running in the browser) does with those cookies is not something that Django can control.

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 7:14pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/7 "2021-02-09T19:14:25Z")

</div>

As per the django documentation [[Cross Site Request Forgery protection | Django documentation | Django](https://docs.djangoproject.com/en/3.1/ref/csrf/)], for ajax calls it fetches the cookie using “document.cookie” method, for that the cookie must be stored first. in this case the output will be undefined. So just to clarify, is it django’s work to set the cookie or has it to be done by react?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 7:27pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/8 "2021-02-09T19:27:22Z")

</div>

As part of a reply to a request, Django can include a Set-Cookie header. That is the limit of what Django can do. Django has no control over what the browser does with any data sent to it.

What the browser does with the content of that header is **strictly** under the control of the browser. Your JavaScript could either store that cookie in the browser’s cookie store, _or_ it can store it within your local data store.

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 7:34pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/9 "2021-02-09T19:34:05Z")

</div>

Thanks Ken, i understood it now. Btw, wanted to ask for one more suggestion as there is a long debate happening about this, which one would be better token auth (xss attack) or session auth (csrf attack) ?

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 7:45pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/10 "2021-02-09T19:45:35Z")

</div>

Hi Ken,

Just came across a SO question [https://stackoverflow.com/questions/61873089/unable-to-get-set-cookie-value-from-header-with-axios-reactjs](https://stackoverflow.com/questions/61873089/unable-to-get-set-cookie-value-from-header-with-axios-reactjs)

here it is said that the set-cookie will not be available in response header, but can be fetched using “document.cookie” . Since i get undefined for document.cookie, how can it be handled from frontend?

So still confused what might be the cause for this

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 7:49pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/11 "2021-02-09T19:49:28Z")

</div>

It’s not one being “better” than the other - the two are different and each has their own advantages. The decision between the two should depend upon how those advantages or benefits stack up for your particular application.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 8:03pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/12 "2021-02-09T20:03:48Z")

</div>

Check the [CSRF\_COOKIE\_HTTPONLY setting](https://docs.djangoproject.com/en/3.1/ref/settings/#csrf-cookie-httponly) in your settings.py file and confirm whether or not httponly is being set on the cookie. It defaults to False, and the docs explain why it’s not much help to set it to true. But if it’s set, it’ll explain what you’re seeing.

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 9, 2021, 8:05pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/13 "2021-02-09T20:05:55Z")

</div>

CSRF\_COOKIE\_HTTPONLY is set to False.  
CSRF\_COOKIE\_SECURE is also set to False

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 9, 2021, 9:58pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/14 "2021-02-09T21:58:28Z")

</div>

Let’s make sure we’re really identifying the right problem here. I’d like to look at this from a different angle.

Since the cookies are mostly supposed to be transparent to the application layer, there really shouldn’t be much that you need to do with them.

If you’ve got an AJAX call that is supposed to be sending the cookies, can you verify in your browser’s developer tools what the headers are being sent in the request that is supposed to include the csrf-cookie?

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 10, 2021, 1:46pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/15 "2021-02-10T13:46:34Z")

</div>

Hi Ken,  
Now the request header contains X-CSRFTOKEN and the csrf cookie value is passed to the view function. But in csrf middleware, the validation is failing because the cookie is fetched using `csrf_token = request.META.get('CSRF_COOKIE')`.

This is happening because cookie is present in header with key “X-CSRFTOKEN”, But middleware checks for the csrf token using “CSRF\_COOKIE” as the key. why is it happening so?  
If i make the request using postman both X-CSRFTOKEN and CSRF\_COOKIE keys are present in the header and it passes the csrf validation , but with browser CSRF\_COOKIE key is not present.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 10, 2021, 1:59pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/16 "2021-02-10T13:59:05Z")

</div>

What about the cookies? Are the cookies being submitted in the request?

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 10, 2021, 3:24pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/17 "2021-02-10T15:24:00Z")

</div>

yes ken. csrf token is passed as X-CSRFToken. But the django csrf middleware checks for token using `request.META.get('CSRF_COOKIE')` under “process\_view” function of **middleware/csrf.py**. since there is no key named “CSRF\_COOKIE” in the request it is raising cookie not set error.

 ![csrftoken](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/2X/4/4e2de549292779fbec1cde11193e254d867b59dd.png)

why is it so?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 10, 2021, 3:25pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/18 "2021-02-10T15:25:22Z")

</div>

I’m not asking about the headers - I’m asking about any cookies being submitted along with the request.

---

<div class="post-metadata">

**Author:** ![Bharath3697](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/bharath3697/32/3439_2.png) [@Bharath3697](https://forum.djangoproject.com/u/Bharath3697)\
**Post date:** [February 10, 2021, 3:25pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/19 "2021-02-10T15:25:43Z")

</div>

No. no cookies are passed. But csrf is a cookie right except that nothing else is passed

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [February 10, 2021, 3:38pm UTC](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509/20 "2021-02-10T15:38:50Z")

</div>

In the HTTP transport, a cookie is a header - a separate header than any of the X-whatever headers. So something sent under the “Cookie” header is different than something sent as X-CSRFToken. If the JavaScript is not sending the “Cookie” header, that’s a different issue.

[Next page](https://forum.djangoproject.com/t/csrf-cookie-is-not-set-with-react-frontend/6509.md?page=2)