Django: AJAX + CSRF POST gives 403

Question

I have a simple code where I make a POST call to URL in Django with CSRF token included. When I paste the javascript code in the template within <script> tags, it works fine, however as soon as I move the code to a static file, I get HTTP 403 response. This is strange!

Here is the code:

$(document).ready(function() {
    $(".like-button").click(function(event) {
        $.ajax({
            url: <relative path of URL>,
            type: "POST",
            data: {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                // other data items
            },
            success: function(data, textStatus, jqXHR) {},
            error: function(jqXHR, textStatus, errorThrown) {}
        });
        // other javascript code to toggle like button class
    });
});

Here's how I include the static file in Django template:

{% block javascript %}
{% load static %}
<script type="text/javascript" src="{% static 'app/app.js' %}"></script>
{% endblock %}

The file is located in static directory:

app
├── static
│   └── app
│       └── app.js

and static settings are:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Note, I do not have STATICFILE_DIRS in the settings yet. I can verify that the file is being loaded and executed, since console.log() statements work perfectly fine. However, I get HTTP 403 request upon POST.

Check the permissions of your static file. Make it weserver readable (666 permission for test) and try again. — Jand, Apr 09 '15 at 23:00
Then make sure that `STATIC_ROOT` and `STATICFILES_DIRS` are correctly set in your settings.py. And don't forget to run `manage.py collectstatic` command if you are in development. It will also help if you mention the exact error message and your file structure. — Jand, Apr 09 '15 at 23:05
403 is the error given by csrf as well, django recommends https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/ to get csrf token via javascript, I'm not sure completely — Mikeec3, Apr 09 '15 at 23:09
@Mikeec3: I am able to successfully include the CSRF token when the script is pasted in the template itself. It's only when I move the code to the file, I get the error. — abhinavkulkarni, Apr 09 '15 at 23:13
@abhinavkulkarni Please add your settings for these to your question: `STATIC_ROOT` and `STATICFILES_DIRS` . — Jand, Apr 09 '15 at 23:13
Oh I get it, you know django doesn't render static files unless onthe template. Lol forgot to mention that. Unless its — Mikeec3, Apr 09 '15 at 23:15

score 2 · Answer 1 · answered Apr 09 '15 at 23:20

When you use the tag directly, django processes the templates and replaces csrfmiddlewaretoken: "{{ csrf_token }}" by the correct token.

Now, when you use a static file, that variable isn't replaced. In order to add a token you should configure your ajax calls described by django documentation: https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/#ajax

      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]);
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
            }
          }
        }
        return cookieValue;
      }
      var csrftoken = getCookie('csrftoken');
      $.ajaxSetup({
        beforeSend: function(xhr, settings) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
      });

score 0 · Answer 2 · answered Apr 09 '15 at 23:14

From Django documentation:

NOTE:
The CSRF token is also present in the DOM, but only if explicitly
included using csrf_token in a template. The cookie contains the
canonical token; the CsrfViewMiddleware will prefer the cookie to the
token in the DOM. Regardless, you’re guaranteed to have the cookie if
the token is present in the DOM, so you should use the cookie!

jQuery cookie plugin:

var csrftoken = $.cookie('csrftoken');

https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/

Any static file not rendered directly on the template cannot make use of django's templating engine. You need to use the csrf cookie.

Check your javascript during runtime, you'll notice the template variable is an empty string.

Django: AJAX + CSRF POST gives 403

2 Answers2