Django CSRF check failing with an Ajax POST request

Question

I could use some help complying with Django s CSRF protection mechanism via my AJAX post  I ve followed the directions here   http   docs djangoproject com en dev ref contrib csrf   I ve copied the AJAX sample code they have on that page exactly   http   docs djangoproject com en dev ref contrib csrf  ajax  I put an alert printing the contents of getCookie  csrftoken   before the xhr setRequestHeader call and it is indeed populated with some data  I m not sure how to verify that the token is correct  but I m encouraged that it s finding and sending something   But Django is still rejecting my AJAX post   Here s my JavaScript     post   memorize    data  function  result        if  result     failure             get random card              else           alert  Failed to save card data                 Here s the error I m seeing from Django       23 Feb 2011 22 08 29   POST  memorize  HTTP 1 1  403 2332   I m sure I m missing something  and maybe it s simple  but I don t know what it is   I ve searched around SO and saw some information about turning off the CSRF check for my view via the csrf exempt decorator  but I find that unappealing   I ve tried that out and it works  but I d rather get my POST to work the way Django was designed to expect it  if possible   Just in case it s helpful  here s the gist of what my view is doing   def myview request        profile   request user profile      if request method     POST                       Process the post                        return HttpResponseRedirect   memorize        else    request method     GET           ajax   request GET has key  ajax                        Some irrelevent code                         if ajax              response   HttpResponse               profile get stack json response              return response         else                              Get data to send along with the content of the page                           return render to response  memorize memorize html                       My data                     context instance RequestContext request     Thanks for your replies

User · Answer

As it is not stated anywhere in the current answers, the fastest solution if you are not embedding js into your template is:

Put <script type="text/javascript"> window.CSRF_TOKEN = "{{ csrf_token }}"; </script> before your reference to script.js file in your template, then add csrfmiddlewaretoken into your data dictionary in your js file:

$.ajax({
            type: 'POST',
            url: somepathname + "do_it/",
            data: {csrfmiddlewaretoken: window.CSRF_TOKEN},
            success: function() {
                console.log("Success!");
            }
        })

User · Answer

Related to the chosen Answer  just want to add on to the chosen Answer  In that answer  regarding the solution with  ajaxSetup       In your Django settings py  if you have CSRF USE SESSIONS   True  It would cause the chosen Answer to not work at all  Deleting that line  or setting it to False worked for me while implementing the chosen Answer s solution  Interestingly  if you set the following in your Django settings py CSRF COOKIE HTTPONLY   True  This variable will not cause the chosen Answer s solution to stop functioning  Both CSRF USE SESSIONS and CSRF COOKIE HTTPONLY comes from this official Django doc https   docs djangoproject com en 2 2 ref csrf   I do not have enough rep to comment  so I am posting my inputs an Answer

User · Answer

It seems nobody has mentioned how to do this in pure JS using the X-CSRFToken header and    csrf token     so here s a simple solution where you don t need to search through the cookies or the DOM   var xhttp   new XMLHttpRequest    xhttp open  POST   url  true   xhttp setRequestHeader  X-CSRFToken       csrf token       xhttp send

User · Answer

I ve just encountered a bit different but similar situation  Not 100  sure if it d be a resolution to your case  but I resolved the issue for Django 1 3 by setting a POST parameter  csrfmiddlewaretoken  with the proper cookie value string which is usually returned within the form of your home HTML by Django s template system with     csrf token     tag  I did not try on the older Django  just happened and resolved on Django1 3  My problem was that the first request submitted via Ajax from a form was successfully done but the second attempt from the exact same from failed  resulted in 403 state even though the header  X-CSRFToken  is correctly placed with the CSRF token value as well as in the case of the first attempt  Hope this helps   Regards   Hiro

User · Answer

The issue is because django is expecting the value from the cookie to be passed back as part of the form data  The code from the previous answer is getting javascript to hunt out the cookie value and put it into the form data  Thats a lovely way of doing it from a technical point of view  but it does look a bit verbose   In the past  I have done it more simply by getting the javascript to put the token value into the post data   If you use    csrf token    in your template  you will get a hidden form field emitted that carries the value  But  if you use    csrf token    you will just get the bare value of the token  so you can use this in javascript like this      csrf token       csrf token        Then you can include that  with the required key name in the hash you then submit as the data to the ajax call

User · Answer

Real solution  Ok  I managed to trace the problem down  It lies in the Javascript  as I suggested below  code   What you need is this     ajaxSetup         beforeSend  function xhr  settings             function getCookie name                 var cookieValue   null               if  document cookie  amp  amp  document cookie                           var cookies   document cookie split                        for  var i   0  i  lt  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                      if      http     test settings url       https     test settings url                      Only send the token to relative URLs i e  locally               xhr setRequestHeader  X-CSRFToken   getCookie  csrftoken                              instead of the code posted in the official docs  https   docs djangoproject com en 2 2 ref csrf   The working code  comes from this Django entry  http   www djangoproject com weblog 2011 feb 08 security   So the general solution is   use ajaxSetup handler instead of ajaxSend handler   I don t know why it works  But it works for me     Previous post  without answer   I m experiencing the same problem actually   It occurs after updating to Django 1 2 5 - there were no errors with AJAX POST requests in Django 1 2 4  AJAX wasn t protected in any way  but it worked just fine    Just like OP  I have tried the JavaScript snippet posted in Django documentation  I m using jQuery 1 5  I m also using the  django middleware csrf CsrfViewMiddleware  middleware   I tried to follow the the middleware code and I know that it fails on this   request csrf token   request META get  HTTP X CSRFTOKEN         and then  if request csrf token    csrf token      return self  reject request  REASON BAD TOKEN    this  if  is true  because  request csrf token  is empty   Basically it means that the header is NOT set  So is there anything wrong with this JS line   xhr setRequestHeader  X-CSRFToken   getCookie  csrftoken          I hope that provided details will help us in resolving the issue

User · Answer

If someone is strugling with axios to make this work this helped me   import axios from  axios    axios defaults xsrfCookieName    csrftoken  axios defaults xsrfHeaderName    X-CSRFToken    Source  https   cbuelter wordpress com 2017 04 10 django-csrf-with-axios

User · Answer

Non-jquery answer   var csrfcookie   function         var cookieValue   null          name    csrftoken       if  document cookie  amp  amp  document cookie                   var cookies   document cookie split               for  var i   0  i  lt  cookies length  i                  var cookie   cookies i  trim                if  cookie substring 0  name length   1      name                           cookieValue   decodeURIComponent cookie substring name length   1                    break                                    return cookieValue       usage   var request   new XMLHttpRequest    request open  POST   url  true   request setRequestHeader  Content-Type    application x-www-form-urlencoded  charset UTF-8    request setRequestHeader  X-CSRFToken   csrfcookie     request onload   callback  request send data

User · Answer

If you use the   ajax function  you can simply add the csrf token in the data body     ajax       data            somedata   somedata           moredata   moredata           csrfmiddlewaretoken      csrf token

User · Answer

One CSRF token is assigned to every session   i e  every time you log in   So before you wish to get some data entered by user and send that as ajax call to some function which is protected by csrf protect decorator  try to find the functions that are being called before you are getting this data from user  E g  some template must be being rendered on which your user is entering data  That template is being rendered by some function  In this function you can get csrf  token as follows  csrf   request COOKIES  csrftoken   Now pass this csrf value in context dictionary against which template in question is being rendered  Now in that template write this line    Now in your javascript function  before making ajax request  write this   var csrf       csrf   val     this will pick value of token passed to template and store it in variable csrf  Now while making ajax call  in your post data  pass this value as well    csrfmiddlewaretoken   csrf   This will work even if you are not implementing django forms   In fact  logic over here is   You need token which you can get from request  So you just need to figure out the function being called immediately after log in  Once you have this token  either make another ajax call to get it or pass it to some template which is accessible by your ajax

User · Answer

Here s a less verbose solution provided by Django    lt script type  text javascript  gt     using jQuery var csrftoken   jQuery   name csrfmiddlewaretoken    val     function csrfSafeMethod method           these HTTP methods do not require CSRF protection     return     GET HEAD OPTIONS TRACE    test method         set csrf header   ajaxSetup       beforeSend  function xhr  settings            if   csrfSafeMethod settings type   amp  amp   this crossDomain                xhr setRequestHeader  X-CSRFToken   csrftoken                           Ajax call here   ajax       url     url  members saveAccount           data  fd      processData  false      contentType  false      type   POST       success  function data            alert data                      lt  script gt    Source  https   docs djangoproject com en 1 11 ref csrf

User · Answer

I have a solution  in my JS I have two functions  First to get Cookies  ie  csrftoken   function getCookie name    let cookieValue   null  if  document cookie  amp  amp  document cookie               const cookies   document cookie split           for  let i   0  i  lt  cookies length  i              const 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     Second one is my ajax function  in this case it s for login and in fact doesn t return any thing  just pass values to set a session  function LoginAjax             get scrftoken      const csrftoken   getCookie  csrftoken         var req   new XMLHttpRequest        var userName   document getElementById  quot Login-Username quot        var password   document getElementById  quot Login-Password quot         req onreadystatechange   function              if  this readyState    4  amp  amp  this status    200                              read response loggedIn JSON show me if user logged in or not             var respond   JSON parse this responseText                           alert respond loggedIn                         req open  quot POST quot    quot login quot   true          following header set scrftoken to resolve problem     req setRequestHeader  X-CSRFToken   csrftoken        req setRequestHeader  quot Content-type quot    quot application x-www-form-urlencoded quot        req send  quot UserName  quot    userName value    quot  amp Password  quot    password value

User · Answer

for someone who comes across this and is trying to debug   1  the django csrf check  assuming you re sending one  is here  2  In my case  settings CSRF HEADER NAME was set to  HTTP X CSRFTOKEN  and my AJAX call was sending a header named  HTTP X CSRF TOKEN  so stuff wasn t working  I could either change it in the AJAX call  or django setting   3  If you opt to change it server-side  find your install location of django and throw a breakpoint in the csrf middleware f you re using virtualenv  it ll be something like     envs my-project lib python2 7 site-packages django middleware csrf py  import ipdb  ipdb set trace     breakpoint   if request csrf token              Fall back to X-CSRFToken  to make things easier for AJAX        and possible for PUT DELETE      request csrf token   request META get settings CSRF HEADER NAME        Then  make sure the csrf token is correctly sourced from request META  4  If you need to change your header  etc - change that variable in your settings file

User · Answer

Using Django 3 1 1 and all solutions I tried failed  However  adding the  quot csrfmiddlewaretoken quot  key to my POST body worked  Here s the call I made    post url      csrfmiddlewaretoken  window CSRF TOKEN    method   quot POST quot     data  JSON stringify data     dataType   JSON         And in the HTML template   lt script type  quot text javascript quot  gt    window CSRF TOKEN    quot    csrf token    quot    lt  script gt

User · Answer

The    csrf token    put in html templates inside  lt form gt  lt  form gt    translates to something like    lt input type  hidden  name  csrfmiddlewaretoken  value  Sdgrw2HfynbFgPcZ5sjaoAI5zsMZ4wZR    gt    so why not just grep it in your JS like this   token       change password-form   find  input name csrfmiddlewaretoken    val     and then pass it e g doing some POST  like     post    panel change password     foo  bar  csrfmiddlewaretoken  token   function data       console log data

User · Answer

Use Firefox with Firebug  Open the  Console  tab while firing the ajax request  With DEBUG True you get the nice django error page as response and you can even see the rendered html of the ajax response in the console tab   Then you will know what the error is

User · Answer

You can paste this js into your html file  remember put it before other js function  lt script gt       using jQuery   function getCookie name        var cookieValue   null      if  document cookie  amp  amp  document cookie                var cookies   document cookie split             for  var i   0  i  lt  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             document  ready function         var csrftoken   getCookie  csrftoken          ajaxSetup         beforeSend  function xhr  settings            if   csrfSafeMethod settings type   amp  amp   this crossDomain              xhr setRequestHeader  quot X-CSRFToken quot   csrftoken                                    lt  script gt

User · Answer

Add this line to your jQuery code     ajaxSetup     data   csrfmiddlewaretoken      csrf token              and done

User · Answer

In my case the problem was with the nginx config that I ve copied from main server to a temporary one with disabling https that is not needed on the second one in the process   I had to comment out these two lines in the config to make it work again     uwsgi param             UWSGI SCHEME    https    uwsgi pass header       X FORWARDED PROTO

User · Answer

If your form posts correctly in Django without JS  you should be able to progressively enhance it with ajax without any hacking or messy passing of the csrf token  Just serialize the whole form and that will automatically pick up all your form fields including the hidden csrf field       myForm   submit function        var action     this  attr  action        var that     this         ajax           url  action          type   POST           data  that serialize            success  function data               console log  Success                           return false        I ve tested this with Django 1 3  and jQuery 1 5   Obviously this will work for any HTML form  not just Django apps

User · Answer

Easy ajax calls with Django  26 10 2020  This is in my opinion much cleaner and simpler than the correct answer  The view  login required def some view request        quot  quot  quot Returns a json response to an ajax call   request user is available in view  quot  quot  quot        Fetch the attributes from the request body     data attribute   request GET get  some attribute      Make sure to use POST GET correctly       DO SOMETHING        return JsonResponse data     status 200   urls py urlpatterns         path  some-view-does-something    views some view  name  doing-something       The ajax call The ajax call is quite simple  but is sufficient for most cases  You can fetch some values and put them in the data object  then in the view depicted above you can fetch their values again via their names  You can find the csrftoken function in django s documentation  Basically just copy it and make sure it is rendered before your ajax call so that the csrftoken variable is defined    ajax       url   quot    url  doing-something     quot       headers    X-CSRFToken   csrftoken       data    some attribute   some value       type   quot GET quot       dataType   json       success  function  data            if  data                console log data                  call function to do something with data             process data function data                        Add HTML to current page with ajax This might be a bit off topic but I have rarely seen this used and it is a great way to minimize window relocations as well as manual html string creation in javascript  This is very similar to the one above but this time we are rendering html from the response without reloading the current window  If you intended to render some kind of html from the data you would receive as a response to the ajax call  it might be easier to send a HttpResponse back from the view instead of a JsonResponse  That allows you to create html easily which can then be inserted into an element  The view   The login required part is of course optional  login required def create some html request        quot  quot  quot In this particular example we are filtering some model by a constraint sent in by      ajax and creating html to send back for those models who match the search quot  quot  quot        Fetch the attributes from the request body  sent in ajax data      search input   request GET get  search input          Get some data that we want to render to the template     if search input          data   MyModel objects filter name  contains search input    Example     else          data             Creating an html string using template and some data     html response   render to string  path to creation template html   context     models   data        return HttpResponse html response  status 200   The html creation template for view creation template html    for model in models        lt li class  quot xyz quot  gt    model name    lt  li gt     endfor     urls py urlpatterns         path  get-html    views create some html  name  get-html       The main template and ajax call This is the template where we want to add the data to  In this example in particular we have a search input and a button that sends the search input s value to the view  The view then sends a HttpResponse back displaying data matching the search that we can render inside an element     extends  base html        load static       block content         lt input id  quot search-input quot  placeholder  quot Type something    quot  value  quot  quot  gt       lt button id  quot add-html-button quot  class  quot btn btn-primary quot  gt Add Html lt  button gt       lt ul id  quot add-html-here quot  gt           lt  -- This is where we want to render new html -- gt       lt  ul gt     end block        block extra js         lt script gt             When button is pressed fetch inner html of ul            quot  add-html-button quot   on  click   function  e               e preventDefault                let search input       search-input   val                let target element       add-html-here                  ajax                   url   quot    url  get-html     quot                   headers    X-CSRFToken   csrftoken                   data    search input   search input                   type   quot GET quot                   dataType   html                   success  function  data                        if  data                               You could also use json here to get multiple html to                         render in different places                            console log data                              Add the http response to element                         target element html data                                                                           lt  script gt     endblock

User · Answer

The accepted answer is most likely a red herring  The difference between Django 1 2 4 and 1 2 5 was the requirement for a CSRF token for AJAX requests  I came across this problem on Django 1 3 and it was caused by the CSRF cookie not being set in the first place  Django will not set the cookie unless it has to  So an exclusively or heavily ajax site running on Django 1 2 4 would potentially never have sent a token to the client and then the upgrade requiring the token would cause the 403 errors  The ideal fix is here  http   docs djangoproject com en dev ref contrib csrf  page-uses-ajax-without-any-html-form but you d have to wait for 1 4 unless this is just documentation catching up with the code Edit Note also that the later Django docs note a bug in jQuery 1 5 so ensure you are using 1 5 1 or later with the Django suggested code  https   docs djangoproject com en dev ref csrf  ajax

[python] Django CSRF check failing with an Ajax POST request

Examples related to python

Examples related to ajax

Examples related to django

Examples related to csrf