how can I solve csrf verification failed - ajax

Question

I'm trying to create form that uploads a zip file to the server. But everytime I click the submit I keep getting CSRF verification failed error. This is my html code:
<form method="POST" name="form-import-file" enctype="multipart/form-data">
<div>
<input type="file" id="file" name="file" accept=".zip"/>
<input type="submit" value="Upload file">
</div>
</form>
<div class="url-csrf" data-csrf="{{ csrf_token }}"></div>
<div class="url-import-file" data-url-import-file="{% url 'intent:import_file' %}"></div>
In my .js code:
$("form[name='form-import-file']").submit(function(e) {
var formData = new FormData($(this)[0]);
alert(formData);
var json_data = {'csrfmiddlewaretoken' : $('.url-csrf').attr('data-csrf'), 'file': formData };
$.ajax({
url: $('.url-import-file').attr('data-url-import-file'),
type: "POST",
data: json_data,
success: function (msg) {
alert(msg)
},
cache: false,
contentType: false,
processData: false
});
e.preventDefault();
});

Answer 1

{% csrf_token %} is hidden input field not a value
In Html
<div id="csrf_token">
{% csrf_token %}
</div>
In js
let csrfToken = $("#csrf_token").val();
var json_data = {'csrfmiddlewaretoken' : csrfToken, 'file': formData };

Answer 2

Did you try with the cookie based CSRF provided by django doc?
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 = 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;
}
var csrftoken = getCookie('csrftoken');
Then add 'csrfmiddlewaretoken' : csrftoken, in you json_data

Answer 3

The best approach is probably the one described in Django documentation: Cross Site Request Forgery protection
If your CSRF_USE_SESSIONS and CSRF_COOKIE_HTTPONLY settings are False, I suggest you create init.js file and always load it in your base html template. Include these two functions in this file:
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;
}
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
To include CSRF token in your ajax requests, you include it in request headers with this code:
$(document).ready(function () {
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
});
});
You can include this in init.js file you created earlier, if you wish, but it must be loaded after jQuery library.
If you have CSRF_USE_SESSIONS and CSRF_COOKIE_HTTPONLY set to True, add {% csrf_token %} to your forms (or somewhere else in your HTML), read the token from there and include it in your ajax request, for example like this:
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
$.ajax({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
url: ...
...
...
});

Answer 4

A simple solution is to use ensure_csrf_cookie
in the view that renders the page. Important, the decorator must be in the view that renders the page,
not in the view that receives the post request.
from django.views.decorators.csrf import ensure_csrf_cookie
#ensure_csrf_cookie
def get_the_page(request):
return render(request, 'template.html')