CSRF token AJAX based post in a Django Project

Question

So I found out the error and it was in my HTML. I just added {% csrf_token %} and it worked :) thanks for the assist guys!

(I used the JS snippet given to me in the first answer but I am still getting a 403 Forbidden error!) what could I be doing wrong?

I recently learnt JS and tried the following JS code for AJAX POST but I am getting a 403 error. Did some further research and found that I needed to pass a CSRF token. I have gone through a lot of tutorials online but the only solutions I was able to find were of JQuery and I have no idea how that syntax works. I need to know how to pass a CSRF token via Javascript AJAX based post for a django project. My code is;

var upvoteBtn = document.querySelector('#upvote');
var downvoteBtn = document.querySelector('#downvote');

upvoteBtn.addEventListener('click', jL);
downvoteBtn.addEventListener('click', cL);

function jL(event) {
    document.getElementById("upvote").style.display='none';
    document.getElementById("downvote").style.display='none';
    var http = new XMLHttpRequest ();
    var url = 'entered my url here';
    var data = 'title=Post%20Title&body=Body';
    var method = 'POST';

    http.open(method, url, true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    http.setRequestHeader("X-CSRFToken", csrftoken);
    http.onreadystatechange = function() {

    if (http.readyState === XMLHttpRequest.DONE && http.status === 200){
        document.getElementById("first").innerHTML = "this post has been voted";
        console.log("upvote given");
    }
    else if (http.readyState === XMLHttpRequest.DONE && http.status !== 200){
        console.log("error!", http.responseText);
    }
};

http.send(data);
}

function cL(event){
    document.getElementById("upvote").style.display='none';
    document.getElementById("downvote").style.display='none';
    var http = new XMLHttpRequest ();
    var url = 'entered my url here';
    var data = 'title=Post%20Title&body=Body';
    var method = 'POST';

    http.open(method, url, true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    http.setRequestHeader("X-CSRFToken", csrftoken);
    http.onreadystatechange = function() {

    if (http.readyState === XMLHttpRequest.DONE && http.status === 200){
        document.getElementById("first").innerHTML = "got downvoted";
        console.log("downvoted!");
    }
    else if (http.readyState === XMLHttpRequest.DONE && http.status !== 200){
        console.log("error!", http.responseText);
    }
}; 
http.send(data);
}

//function for CSRF token
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}    
var csrftoken = getCookie('csrftoken'); 

Answer 1

You need to call:

xhr.setRequestHeader("X-CSRFToken", csrftoken);

when you prepare your xhr request. (in your example xhr is named http)

you can get the csrftoken from the cookie, but in order to do that you need to implement a getCookie function.

Something like this should do the trick:

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

var csrftoken = getCookie('csrftoken');

Update

In your code this should look something like this:

upvoteBtn.addEventListener('click', jL);
downvoteBtn.addEventListener('click', cL);

//first define your getCookie function
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function jL(event) {
    //...
    //Then when you prepare you data fetch the token
    var csrftoken = getCookie('csrftoken');

    http.open(method, url, true);
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    //Now set it
    http.setRequestHeader("X-CSRFToken", csrftoken);
    //... the rest of your code
}

function cL(event){
    //do the same here
}