web-dev-qa-db-fra.com

Ajout de CSRFToken à la demande Ajax

Je dois transmettre CSRFToken avec une demande de publication basée sur Ajax, mais je ne sais pas comment cela peut être fait de la meilleure façon. Utilisation d'une plate-forme qui vérifie en interne la demande CSRFToken (demande POST uniquement)

au départ, je pensais l'ajouter à l'en-tête comme

$(function() {
    $.ajaxSetup({
        headers : {
            'CSRFToken' : getCSRFTokenValue()
        }
    });
});

Ce qui le mettra à la disposition de chaque requête Ajax, mais cela ne fonctionnera pas dans mon cas, car dans la requête, la variable CSRFToken est toujours nulle.

Est-il possible de définir CSRFToken pour tous les appels Ajax traitant du type POST

Edit Si je fais quelque chose comme ça dans mon appel Ajax

data: {"newsletter-subscription-email" : "XXX" , 'CSRFToken': getCSRFTokenValue()},

Tout fonctionne bien.

Mon problème est, je souhaite passer la valeur CSRFToken en tant que paramètre de requête et non en-tête de requête

javascriptjqueryajax
28
Umesh Awasthi

Que dis-tu de ça,

$("body").bind("ajaxSend", function(Elm, xhr, s){
   if (s.type == "POST") {
      xhr.setRequestHeader('X-CSRF-Token', getCSRFTokenValue());
   }
});

Réf: http://erlend.oftedal.no/blog/?blogid=118

Pour passer CSRF en paramètre,

        $.ajax({
            type: "POST",
            url: "file",
            data: { CSRF: getCSRFTokenValue()}
        })
        .done(function( msg ) {
            alert( "Data: " + msg );
        });
26
Krish R

Vous pouvez utiliser ceci:

var token = "SOME_TOKEN";

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
  jqXHR.setRequestHeader('X-CSRF-Token', token);
});

De la documentation:

jQuery.ajaxPrefilter ([dataTypes], gestionnaire (options, originalOptions, jqXHR)) 

Description: Gestion des options Ajax personnalisées ou modification des options existantes avant que chaque demande soit envoyée et avant qu’elles ne soient traitées par $ .ajax ().

Lis

7
Farkhat Mikhalko

Voici le code que j'ai utilisé pour empêcher le problème de jeton CSRF lors de l'envoi d'une demande POST avec ajax

$(document).ready(function(){
    function getCookie(c_name) {
        if(document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if(c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if(c_end == -1) c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return "";
    }

    $(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRFToken": getCookie("csrftoken")
            }
        });
    });

});

4
Chemical Programmer

Si vous travaillez dans node.js avec Lusca, essayez aussi ceci:

$.ajax({
url: "http://test.com",
type:"post"
headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')}
})
2
Massimo Ivaldi

Cela a fonctionné pour moi (avec jQuery 2.1)

$(document).ajaxSend(function(Elm, xhr, s){
    if (s.type == "POST") {
        s.data += s.data?"&":"";
        s.data += "_token=" + $('#csrf-token').val();
    }
});

ou ca:

$(document).ajaxSend(function(Elm, xhr, s){
    if (s.type == "POST") {
        xhr.setRequestHeader('x-csrf-token', $('#csrf-token').val());
    }
});

(où # csrf-token est l'élément contenant le jeton)

1
Sabrina Leggett

De JSP 

<form method="post" id="myForm" action="someURL">
    <input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">    
</form>

C'est la manière la plus simple qui a fonctionné pour moi après 3h de lutte: récupérez simplement le jeton dans le champ masqué d'entrée et, tout en faisant la demande AJAX, il suffit de passer ce jeton dans l'en-tête comme suit:

De Jquery

var token =  $('input[name="csrfToken"]').attr('value');

De Javascript simple

var token = document.getElementsByName("csrfToken").value;

Demande finale AJAX 

$.ajax({
      url: route.url,
      data : JSON.stringify(data),
      method : 'POST',
      headers: {
                    'X-CSRF-Token': token 
               },
      success: function (data) { ...      },
      error: function (data) { ...  }

});

Désormais, vous n'avez plus besoin de désactiver la sécurité crsf dans la configuration Web et cela ne vous donnera pas d'erreur 405 (méthode non autorisée) sur la console.

J'espère que cela aidera les gens .. !!

1
MOnkey

J'ai eu ce problème dans une liste de publication dans un blog, les publications sont dans une vue dans une foreach, puis il est difficile de les sélectionner en javascript, et le problème de la méthode de publication et du jeton existe également.

Ceci le code pour javascript à la fin de la vue, je génère le jeton en javascript functión dans la vue et non dans un fichier js externe, puis il est facile d'utiliser php lavarel pour le générer avec la fonction csrf_token (), et envoyer le "delete "méthode directement dans params . Vous pouvez voir que je n’utilise pas dans var route: {{route ('post.destroy', $ post-> id}} parce que je ne connais pas l’identifiant que je veux supprimer jusqu’à ce que quelqu'un clique sur le bouton de destruction, si vous ne rencontrez pas ce problème, vous pouvez utiliser {{route ('post.destroy', $ post-> id}} ou autre, comme celui-ci.

  $(function(){
    $(".destroy").on("click", function(){
         var vid = $(this).attr("id");
         var v_token = "{{csrf_token()}}";
         var params = {_method: 'DELETE', _token: v_token};
         var route = "http://imagica.app/posts/" + vid + "";
    $.ajax({
         type: "POST",
         url: route,
         data: params
    });
   });
  });

et ceci le code de contenu en vue (dans foreach il y a plus de formulaires et les données de chaque message mais ce n'est pas important pour cet exemple), vous pouvez voir que j'ajoute une classe "delete" à button et que j'appelle class en javascript.

      @foreach($posts as $post)
          <form method="POST">
            <button id="{{$post->id}}" class="btn btn-danger btn-sm pull-right destroy" type="button" >eliminar</button>
          </form>
      @endforeach
0
Raul Fernandez Marques

La réponse ci-dessus n'a pas fonctionné pour moi. 

J'ai ajouté le code suivant avant ma demande 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]);
                        // 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;
            }
            var csrftoken = getCookie('csrftoken');

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $.ajax({
                     type: 'POST',
                     url: '/url/',
            });
0
TheOddAbhi