How do I include Django 1.2's CSRF token in a Javascript-generated HTML form?

Question

I recently upgraded to Django 1.2.3 and my upload forms are now broken. Whenever I attempt to upload, I receive a "CSRF verification failed. Request aborted." error message.

After reading Django's documentation on this subject, it states that I need to add the {% csrf_token %} template tag within the HTML <form> in my template. Unfortunately, my <form> is generated via JavaScript (specifically, ExtJs's "html" property on a Panel).

Long story short, how do I add the required CSRF token tag to my <form> when my <form> is not included in a Django template?

chrisv · Accepted Answer · 2011-03-30 13:36:18Z

13

Another option would be to adapt the cookie/header based solution shown in the Django docs with Ext - preferable if you have a lot of templates and don't want to change every single one.

Just drop the following snippet in your overrides.js (or wherever you put global modifications):

Ext.Ajax.on('beforerequest', function (conn, options) {
   if (!(/^http:.*/.test(options.url) || /^https:.*/.test(options.url))) {
     if (typeof(options.headers) == "undefined") {
       options.headers = {'X-CSRFToken': Ext.util.Cookies.get('csrftoken')};
     } else {
       options.headers.extend({'X-CSRFToken': Ext.util.Cookies.get('csrftoken')});
     }                        
   }
}, this);

(edit: Ext already has cookie reading function, no need to duplicate it)

edited Mar 30, 2011 at 13:36

answered Mar 30, 2011 at 11:22

chrisv

1,50117 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

john2x Over a year ago

Do I need to do/add anything to my dynamically generated form?

chrisv Over a year ago

@john2x: Nope, you just need to put the code in your overrides.js. If you are not familiar with the concept of overrides.js, the following blog is a good start: edspencer.net/2009/07/extoverride-monkey-patching-ext-js.html

Swanand Over a year ago

+1. Brilliant, I was thinking on the same lines when I found this answer!

serg Over a year ago

Also worth noting that csrftoken cookie might not be present if your template doesn't contain {% csrf_token %}. To force always setting the cookie decorate your views with @ensure_csrf_cookie imported as from django.views.decorators.csrf import ensure_csrf_cookie. See docs.djangoproject.com/en/1.8/ref/csrf/#ajax

matt snider · Accepted Answer · 2012-10-11 21:11:45Z

9

The easiest way is to create a hidden form on your page using django that doesn't do anything. Then use JavaScript to fetch the form and specifically the token input out of the form. Lastly, insert or copy that token input into the form you are dynamically generating.

Here are two examples of how you might publish the token for JavaScript.

<input id="csrf_token" value="{{ csrf_token }}"/>

<script type="text/javascript">
var CSRF_TOKEN = document.getElementById('csrf_token').value;
</script>

or

<script type="text/javascript">
var CSRF_TOKEN = "{{ csrf_token }}";
</script>

edited Oct 11, 2012 at 21:11

answered Sep 21, 2010 at 21:29

matt snider

4,1335 gold badges28 silver badges39 bronze badges

1 Comment

viam0Zah Over a year ago

@Huuuze: put {csrf_token} in the template somewhere, and parse it with JavaScript during form building.

Olli · Accepted Answer · 2011-08-27 13:10:32Z

1

A better solution is to generate the code of the js file from a view/template.

Then, in the view you can set the csrf token up in the context like so...

from django.core.context_processors import csrf
context = RequestContext(request)
context.update(csrf(request))

Then, in the template, you can use {{ csrf_token }} to get the raw value of the csrf token, and then use that to build a hidden field into your form with the name csrfmiddlewaretoken.

edited Aug 27, 2011 at 13:10

Olli

1,24515 silver badges32 bronze badges

answered Nov 10, 2010 at 12:23

fatgeekuk

4032 silver badges5 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:53:55Z

0

Does the view you are POSTing to also respond to GET? In that the JS code can make a GET request to the view in question and parse the output to extract the CSRF token. My JS-fu is weak and I am not sure how best you can do the parsing from the client side.

For a broadly related example see this question. In this case the user was attempting to POST using a Python script and failing for the same reason. The solution was the same, except he had to do it from a Python script rather than JavaScript.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Sep 22, 2010 at 5:13

Manoj Govindan

75.2k21 gold badges138 silver badges142 bronze badges

Comments

Dave · Accepted Answer · 2011-10-12 16:06:59Z

0

This may not be ideal, but it was the fastest solution for me. In my main template at the bottom of the "body", I added a javascript function to my library.

<script type="text/javascript">
    MyToolkit.Utils.getCSRFToken = function () {
         return "{% csrf_token %}";
    };
</script>

answered Oct 12, 2011 at 16:06

Dave

1,22617 silver badges22 bronze badges

1 Comment

Tom Over a year ago

That tag returns a hidden div. I think you meant {{ csrf_token }}

Collin Anderson · Accepted Answer · 2014-01-24 18:05:38Z

0

This will use the csrf token or auto generate a new one if needed. It will handle all form submits on the page. If you have off-site forms you'll need to make sure they don't run this code.

<script>
$(document).on('submit', 'form[method=post]', function(){
  if(!document.cookie.match('csrftoken=([a-zA-Z0-9]{32})')) {
    for(var c = ''; c.length < 32;) c += 'abcdefghijklmnopqrstuvwxyz'.charAt(Math.random() * 26)
    document.cookie = 'csrftoken=' + c + '; path=/'
  }
  if(!this.csrfmiddlewaretoken) $(this).append('<input type="hidden" name="csrfmiddlewaretoken">')
  $(this.csrfmiddlewaretoken).val(document.cookie.match('csrftoken=([a-zA-Z0-9]{32})')[1])
})
</script>

requires jQuery 1.7+

answered Jan 24, 2014 at 18:05

Collin Anderson

15.6k6 gold badges70 silver badges60 bronze badges

Collectives™ on Stack Overflow

How do I include Django 1.2's CSRF token in a Javascript-generated HTML form?

6 Answers 6

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related