Django CSRF token is missing

Question

I have an function in the custom.js file as follows :

function contactTraxio(fullname, telephone, email) {
    if (typeof(fullname)==='undefined') fullname = null;
    if (typeof(telephone)==='undefined') telephone = null;
    if (typeof(email)==='undefined') email = null;
    bootbox.dialog({
        title: "Limit reached",
        message: '<p class="text-main text-center">You have reached the limit of your calculations.</p>' +
                 '<p class="pad-btm mar-btm text-center">Upgrade your account by contacting us on +32 9 111 12 12 or filling in the form below.</p>' +
                 '<div class="row"> ' +
                    '<div class="col-md-12"> ' +
                        '<form class="" method="POST"> ' +

                            '<div class="form-group"> ' +
                                '<div class="col-md-6" style="padding-left: 0"> ' +
                                    '<input id="contact-fullname" name="fullname" type="text" placeholder="Your fullname" class="form-control input-md" value="' + fullname + '"> ' +
                                    '<span class="help-block"><small></small></span> </div> ' +
                                '</div> ' +
                                '<div class="col-md-6" style="padding-right: 0"> ' +
                                    '<input id="contact-telephone" name="telephone" type="text" placeholder="Telephone" class="form-control input-md" value="' + telephone + '"> ' +
                                    '<span class="help-block"><small></small></span> </div> ' +
                                '</div> ' +
                                '<div class="col-md-12 pad-no-lr-md" style="margin-top: 7.5px;"> ' +
                                    '<input id="contact-email" name="email" type="text" placeholder="Your email address" class="form-control input-md" value="' + email + '"> ' +
                                    '<span class="help-block"><small></small></span> </div> ' +
                                '</div> ' +
                            '</div>' +
                        '</form> ' +
                    '</div>' +
                 '</div>',
        buttons: {
            success: {
                label: "Send",
                className: "btn-primary",
                callback: function () {
                    $.ajax({
                       type: 'POST',
                       url: '/master/contact_traxio/',
                       data: {
                           fullname: $('#contact-fullname').val(),
                           telephone: $('#contact-telephone').val(),
                           email: $('#contact-email').val(),
                           csrfmiddlewaretoken: '{{ csrf_token }}'
                       },
                       success: function (data) {
                           debugger;
                       }
                    });


                }
            }
        }
    });
}

Thus, I have an contact form in js. And I'm trying to send the form data to the django view with ajax.

I've added csrfmiddlewaretoken: '{{ csrf_token }}' to the data, but for some reason I get an error :

Forbidden (CSRF token missing or incorrect.): /master/contact_traxio/
[03/Mar/2017 08:52:46] "POST /master/contact_traxio/ HTTP/1.1" 403 2502

The contact_traxio view is as follows :

@login_required
def contact_traxio(request):
    if request.method == 'POST':
        # Just test
        return HttpResponse('{} / {} / {}'.format(request.POST['fullname'], request.POST['telephone'], request.POST['email']))
    else:
        return HttpResponseBadRequest("Sorry. Something went wrong.")

And the django template from where I call the contactTraxio function is as follows :

{% block page_content %}
    <script>
        $(document).ready(function () {
            var fullname = '{{ user.user.first_name }} {{ user.user.last_name }}';
            contactTraxio(fullname, '{{ user.telephone }}', '{{ user.user.email }}')
        })
    </script>
{% endblock %} 

Why is the csrf token isn't sent?

Any advice?

Answer 1

You're using Django template syntax in an external JS file. That can't work, because Django does not parse those files.

The documentation shows exactly what you need to do to access the token from your JS; you should follow it.