it-swarm.com.de

Hinzufügen von CSRFToken zur Ajax-Anforderung

Ich muss CSRFToken mit Ajax-basierter Post-Anfrage übergeben, bin mir aber nicht sicher, wie dies am besten funktioniert. Verwenden einer Plattform, die CSRFToken in request intern überprüft (nur POST-Anforderung)

anfangs überlegte ich, ob ich es dem header hinzufügen möchte

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

Das wird es für jede Ajax-Anfrage verfügbar machen, aber es wird für meinen Fall nicht funktionieren, da in der Anfrage CSRFToken immer noch als null kommt.

Gibt es eine Möglichkeit, CSRFToken für alle Ajax-Aufrufe festzulegen, die sich mit dem Typ POST befassen?

Bearbeiten Wenn ich so etwas in meinem Ajax-Aufruf mache

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

Alles funktioniert gut.

Mein Problem ist, ich möchte CSRFToken als Anforderungsparameter und nicht als Anforderungsheader übergeben

28
Umesh Awasthi

Wie wäre es damit,

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

Ref: http://erlend.oftedal.no/blog/?blogid=118

CSRF als Parameter übergeben,

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

Sie können dies verwenden:

var token = "SOME_TOKEN";

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

Aus der Dokumentation:

jQuery.ajaxPrefilter ([dataTypes], Handler (Optionen, OriginalOptions, jqXHR)) 

Beschreibung: Behandeln Sie benutzerdefinierte Ajax-Optionen oder ändern Sie vorhandene Optionen bevor jede Anforderung gesendet wird und bevor sie von $ .ajax () verarbeitet werden.

Lesen

7

Hier ist der Code, den ich verwendet habe, um das CSRF-Token-Problem beim Senden einer POST Anforderung mit Ajax zu verhindern

$(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

Wenn Sie in node.js mit lusca arbeiten, versuchen Sie auch Folgendes:

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

Das hat für mich funktioniert (mit jQuery 2.1)

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

oder dieses:

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

(wobei # csrf-token das Element ist, das das token enthält)

1
Sabrina Leggett

Von JSP 

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

Dies ist der einfachste Weg, der für mich funktioniert hat, nachdem ich um 3 Stunden gekämpft hatte. Holen Sie sich einfach das Token aus dem ausgeblendeten Eingabefeld und machen Sie während der Anforderung AJAX dieses Token wie folgt in den Header.

Von Jquery

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

Von einfachem Javascript

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

Final AJAX Anfrage 

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

});

Jetzt müssen Sie die Crsf-Sicherheit in der Web-Konfiguration nicht deaktivieren. Außerdem erhalten Sie auf der Konsole keinen 405-Fehler (Methode nicht zulässig).

Hoffe das hilft den Leuten .. !!

1
MOnkey

Ich hatte dieses Problem in einer Liste von Post in einem Blog, der Post ist in einer Ansicht in einem Foreach, dann ist es schwierig, es in Javascript auszuwählen, und das Problem der Post-Methode und des Tokens besteht ebenfalls.

Dies ist der Code für Javascript am Ende der Ansicht. Ich generiere das Token in der JavaScript-Funktion in der Ansicht und nicht in einer externen js-Datei. Anschließend kann es einfach mit php lavarel mit der Funktion csrf_token () generiert werden "Methode direkt in params . Sie können sehen, dass ich sie nicht in var route verwende: {{route ('post.destroy', $ post-> id}}), weil ich die ID nicht kenne, die ich löschen möchte Wenn jemand nicht auf die Schaltfläche "Zerstöre" klickt, können Sie, wenn Sie dieses Problem nicht haben, {{route ('post.destroy', $ post-> id}} oder ein ähnliches Programm verwenden.

  $(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
    });
   });
  });

und dies ist der Code des Inhalts in Sicht (innerhalb von foreach gibt es mehr Formulare und die Daten jedes Beitrags, ist aber in diesem Beispiel nicht wichtig). Sie können sehen, dass ich eine Schaltfläche "delete" zum Button hinzufüge und Klasse in Javascript nenne.

      @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

Jeder, der var myVar = 'token' benutzt, ist wahrscheinlich die schlechteste Idee. Ich kann es direkt in der Konsole ausdrucken. Sie müssen auf der Clientseite verschlüsseln und dann auf der Serverseite entschlüsseln.

0
AntoineWtrd

Die obige Antwort hat für mich nicht funktioniert. 

Ich habe vor meiner Ajax-Anfrage den folgenden Code hinzugefügt:

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