i'm trying to add to the html page a form with js (like the html token {% csrf_token %} when loading the page does):

table += "<td><form action='' method='post'>";
table += "<input type='submit' value='Delete?' />";
table += "</form></td>;
$("#tbody").append(table);

my problem is that i get a csrf validation error:

Forbidden (403)
CSRF verification failed. Request aborted.
Help
Reason given for failure:
    CSRF token missing or incorrect.

i tried to add a custom csrf token:

var buf = new Uint8Array(1);
window.crypto.getRandomValues(buf); 

table += "<input type='hidden' name='csrfmiddlewaretoken' value='" + buf[0] + "'>";

but i still get an error.

i also have in my js file the following code (which i got from the django website - and i don't know how it actually works..):

//enable csrf post ajax

//This function gets cookie with a given name
function getCookie(name) {
 var cookieValue = null;
 if (document.cookie && document.cookie != '') {
     var cookies = document.cookie.split(';');
     for (var i = 0; i < cookies.length; i++) {
         var cookie = jQuery.trim(cookies[i]);
         // 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;
}
var csrftoken = getCookie('csrftoken');

/*
The functions below will create a header with csrftoken
*/

function csrfSafeMethod(method) {
 // these HTTP methods do not require CSRF protection
 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({ 
 beforeSend: function(xhr, settings) {
     if (!csrfSafeMethod(settings.type) && !this.crossDomain && 
        (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url)))) {
     // Only send the token to relative URLs i.e. locally.
     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
     }
 } 
});

is there a way to add a csrf token with js the way i tried or it can not be?

i'm trying to add to the html page a form with js (like the html token {% csrf_token %} when loading the page does):

table += "<td><form action='' method='post'>";
table += "<input type='submit' value='Delete?' />";
table += "</form></td>;
$("#tbody").append(table);

my problem is that i get a csrf validation error:

Forbidden (403)
CSRF verification failed. Request aborted.
Help
Reason given for failure:
    CSRF token missing or incorrect.

i tried to add a custom csrf token:

var buf = new Uint8Array(1);
window.crypto.getRandomValues(buf); 

table += "<input type='hidden' name='csrfmiddlewaretoken' value='" + buf[0] + "'>";

but i still get an error.

i also have in my js file the following code (which i got from the django website - and i don't know how it actually works..):

//enable csrf post ajax

//This function gets cookie with a given name
function getCookie(name) {
 var cookieValue = null;
 if (document.cookie && document.cookie != '') {
     var cookies = document.cookie.split(';');
     for (var i = 0; i < cookies.length; i++) {
         var cookie = jQuery.trim(cookies[i]);
         // 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;
}
var csrftoken = getCookie('csrftoken');

/*
The functions below will create a header with csrftoken
*/

function csrfSafeMethod(method) {
 // these HTTP methods do not require CSRF protection
 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({ 
 beforeSend: function(xhr, settings) {
     if (!csrfSafeMethod(settings.type) && !this.crossDomain && 
        (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url)))) {
     // Only send the token to relative URLs i.e. locally.
     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
     }
 } 
});

is there a way to add a csrf token with js the way i tried or it can not be?

• javascript
• django

• Suggestion: use JQuery $.cookie("csrftoken") . getCookie method is not required. – Aman Gupta Commented Mar 21, 2016 at 13:00

2 Answers 2

The Javascript code provided by django for csrftoken extraction assigns csrftoken value to a variable named csrftoken

You can access it anywhere by its variable name, like this:

table += "<input type='hidden' name='csrfmiddlewaretoken' value='" + csrftoken + "'>";

Make sure you've included the js provided by django in your page before accessing csrftoken

Also, as @Sander pointed out, if you're using inline JS you can directly use csrf_token template tag instead.

table += "{% csrf_token %}";

Is the js added as inline js to your django template?

In that case you can do:

table += "<td><form action='' method='post'>";
table += "{% csrf_token %}";
table += "<input type='submit' value='Delete?' />";
table += "</form></td>;
$("#tbody").append(table);