Echec de Django CSRF avec ajax

Question

J'ai un problème avec l'utilisation de Django CSRF avec Ajax. Je reçois un 403 Interdit. J'ai fait toutes les choses CSRF que je fais normalement avec une demande non-ajax, mais j'ai toujours ce problème. Je pense que cela a quelque chose à voir avec l'extrait javascript au https://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax.

$(document).ajaxSend(function(event, xhr, settings) { 
    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 sameOrigin(url) 
    { 
     // url could be relative or scheme relative or absolute 
     var host = document.location.host; // host + port 
     var protocol = document.location.protocol; 
     var sr_origin = '//' + host; 
     var origin = protocol + sr_origin; 
     // Allow absolute or scheme relative URLs to same origin 
     return (url == origin || url.slice(0, origin.length + 1) == origin + '/') || 
      (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') || 
      // or any other URL that isn't scheme relative or absolute i.e relative. 
      !(/^(\/\/|http:|https:).*/.test(url)); 
    } 
    function safeMethod(method) 
    { 
     return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
    } 
    if (!safeMethod(settings.type) && sameOrigin(settings.url)) 
    { 
     xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
    } 
}); 

Je n'utilise actuellement cet extrait, surtout parce que je ne comprends pas un mot et je ne sais pas comment l'intégrer dans mon jquery appel ajax:

function submit_search() 
{ 
    $.ajax({ 
      data:  {query: document.search_form.query.value}, 
      datatype: 'json', 
      success: function(data, textStatus, XMLHttpRequest) 
         { 
          if (data) 
          { 
          if (check_authentication(data)) 
          { 
           $("#results").html(""); 
           var results = data[0]; 
           var length = data[1]; 
           for (var index = 0; index < results.length; ++index) 
           { 
            var result = results[index]; 
            $("#results").append("<p><a href='/entities/" + result["id"] + "'>" + result["name"] + 
                 "</a><br />" + result["description"] + "</p>"); 
           } 
          } 
          else 
          { 
           offer_login(); 
          } 
          } 
         }, 
      type:  'POST', 
      url:  '/ajax/search', 
      }); 
} 

Est-ce que quelqu'un sait comment je devrais aller ajouter cet extrait à mon code?

a également essayé:

$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) { 
      // Only send the token to relative URLs i.e. locally. 
      xhr.setRequestHeader("X-CSRFToken", 
           $("#csrfmiddlewaretoken").val()); 
     } 
    } 
}); 

mais cela ne semble pas aussi travailler, même si je ne suis pas sûr que je devrais faire quelque chose pour le peu de #csrfmiddlewaretoken dans ma forme

Merci

Answer 1

Tout ce que vous devez faire est de coller le bloc de code de telle sorte que le code qu'il contient soit exécuté. Si vous avez un fichier JS global, vous devriez pouvoir ajouter ce JavaScript à la fin du fichier, et le problème sera résolu.

Answer 2

bien, étapes couple nécessaire comme indiqué dans https://docs.djangoproject.com/en/dev/ref/contrib/csrf/

Pour résumer la doc django fastidieux, vous devez: 1. installer des plugins de jquery.cookie 2. Assurez-vous que crsf_token se passe autour

par exemple, dans votre modèle, la forme doit contenir le champ caché suivant

<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}"/> 

dans votre demande de paiement ajax, vous devez les choses si semblables comme

csrf_token = $.cookie('csrftoken'); 
$.ajax({ 
    url: '/url/', 
      type: 'POST', 
      beforeSend: function(xhr, settings) { 
       xhr.setRequestHeader("X-CSRFToken", csrf_token); 
      }, 
      data: $('.form').serialize(), //assume you are submit a form 
}).done(function(response){ 
     console.log(response) 
}); 

un petits trucs que vous pourriez manquer est, votre page de destination (non-ajax) aura besoin décorateur @csrf_protect pour mettre en place cookie, si vous ne le faites pas, le cookie existe pas et la méthode échouera. Si vous ne voulez pas faire le décorateur @csrf_protect, vous pouvez toujours vous référer au document et configurer spécifiquement le cookie. De toute façon va fonctionner.

Espérons que cela aide.