send csrf_token in JSON request (no ajax)

Question

I'm trying to send a JSON request to my Django application with a csrf token, but I can't figure out how. I've gotten the token into a variable that I can reference, but I don't know how to send it through the JSON request with fetch. I've added 'csrfmiddlewaretoken': csrftoken into the JSON.stringify part of body, but I'm still getting an error saying 403 Forbidden. Can someone please help me with this? Thank you! (sorry for the weird indentation on the code)

Javascript file:

fetch('/update', {
          method: 'PUT',
          body: JSON.stringify({
            'csrfmiddlewaretoken': csrftoken,
            'liked': true,
            'post_id': parseInt(button.dataset.post_id)
          })
        })

views.py:

data = json.loads(request.body)
        try:
            content = data.get('content')
        except:
            JsonResponse({'error': 'content required'}, status=400)
        try:
            id = data.get('id')
            post = Post.objects.get(id=id)
        except:
            JsonResponse({'error': 'post not found'}, status=400)
        if request.user == post.user:
            post.content = content
            post.save()
            return JsonResponse({'message': f'received: {content}'})
        return JsonResponse({'error': "can't edit this user's posts"}, status=403)

there is no code in here, it's hard to have an idea of what you're doing — Andrea Giammarchi
– Andrea Giammarchi, Commented Jul 22, 2020 at 14:34
Hi Patrick, welcome to Stackoverflow! To make it easier for other users to help you with your issue it's recommended that you share a few snippets of the code you're using, so that they can try to replicate the issue as well :) — Gabcvit
– Gabcvit, Commented Jul 22, 2020 at 14:39

Farhan Syedain · Accepted Answer · 2024-01-04 15:49:47Z

4

First of all to get the csrf you can use the following code

function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
        }
    }
}
return cookieValue;

}

Now that we got the CSRF token, add this line of code into you headers of fetch

'X-CSRFToken':csrftoken,

Refrence

edited Jan 4, 2024 at 15:49

answered Jul 22, 2020 at 14:50

Farhan Syedain

5284 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Farhan Syedain Over a year ago

I dint provide the Code directly cuz stackoverfolw was showing errors, sorry for that

crimsonpython24 · Accepted Answer · 2020-07-22 14:52:08Z

First, from Andrea and Gabcvit, some pieces of code will be greatly appreciated.

Editing Farhan's answer: you need to manually retrieve the csrf token as there isn't a default in javascript for you to do so. You can do this by:

import jQuery from 'jquery';  // important dependency

function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      let cookie = jQuery.trim(cookies[i]);
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
      }
    }
  }
  return cookieValue;
}

var csrftoken = getCookie('csrftoken');

In case that React didn't receive Django's csrf token (which happened in my case), you need to add the following code above your view:

@method_decorator(ensure_csrf_cookie, name='dispatch')
class UserLoginView(View):
    # ...

In case you need more help, this MDN article will help you.

Collectives™ on Stack Overflow

send csrf_token in JSON request (no ajax)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related