Wie pass entlang CSRF-token in einer AJAX-post-request für eine form?

Ok, nachdem du diese für ein paar Stunden und versuchen zu entschlüsseln, Spielen Häufig-fehlt-Kontext-Dokumentation auf der Thema, ich habe es.

So, von Ihren docs:

Ermöglichen einfachen Schutz für nicht-browser-Anforderungen, Spielen Sie nur prüft
Anfragen mit cookies in den header. Wenn Sie Anfragen mit
AJAX, können Sie das CSRF-token in der HTML-Seite und fügen Sie es anschließend
auf die Anforderung mit der Csrf-Token header.

Und dann gibt es keinen code oder Beispiel. Dank Spielen. Sehr beschreibend. Wie auch immer, hier ist, wie:

in Ihrem view.html.formTemplate Sie schreiben in IntelliJ:

@()
<form method="post" id="myForm" action="someURL">

@helper.CSRF.formField  <!-- This auto-generates a token for you -->
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

Und dadurch wird dargestellt, wie diese bei der Auslieferung an den Kunden:

<form method="post" id="myForm" action="someURL">

<input name="csrfToken" value="5965f0d244b7d32b334eff840...etc" type="hidden">
  <input type="text" id="sometext">
  <button type="submit"> Submit! </button>

</form>

Ok, es fast geschafft, jetzt müssen wir es schaffen, unsere AJAX-call. Ich habe alle von mir in einem separaten main.js Datei, aber Sie können auch setzen Sie diese in Ihre view.html.formTemplate wenn Sie wollen.

$(document).on('submit', '#myForm', function (event) {

 event.preventDefault();
   var data = {
    myTextToPass: $('#sometext').val()
   }
 //LOOK AT ME! BETWEEN HERE AND
 var token =  $('input[name="csrfToken"]').attr('value')
    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader('Csrf-Token', token);
        }
    });
//HERE
 var route = jsRoutes.controllers.DashboardController.postNewProject()
 $.ajax({
    url: route.url,
    type: route.type,
    data : JSON.stringify(data),
    contentType : 'application/json',
    success: function (data) { ...      },
    error: function (data) { ...  }
        })

});

Mit dieser Zeile:
var token = $('input[name="csrfToken"]').attr('value')
Sie zupfen sich das CSRF-token automatisch generierte im Formular-Feld und packte Ihren Wert in eine var zu Ihr Javascript.

Andere wichtige Stück von allem, was AJAX ist hier:

$.ajaxSetup({
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Csrf-Token', token);
            }
        });

Mithilfe der $.ajaxSetup können Sie festlegen, was in der Kopfzeile. Dies ist, was Sie haben, zu folgern aus Ihrer Dokumentation:

hinzufügen, um die Anfrage über das Csrf-Token-header.

Glück! Lassen Sie mich wissen, wenn das ist klar.

Hinweis: bei der Verwendung von lusca, verwenden Sie X-CSRF-Token statt Csrf-Token.

InformationsquelleAutor NateH06

Vom JSP

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

Dies ist der einfachste Weg, arbeitete für mich nach kämpfen für 3 Stunden, nur um die token von der input-hidden-Feld, wie dies und während der AJAX-request nur übergeben müssen dieses token im header wie folgt:-

Von JQuery

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

Von plain Javascript

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

Letzte AJAX-Request

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

});

Jetzt brauchen Sie nicht zu deaktivieren crsf Sicherheit in der web-config, und auch dies wird nicht geben Sie 405( Methode Nicht Erlaubt) Fehler auf der Konsole.

Hoffen, dies wird den Menschen helfen..!!

InformationsquelleAutor MOnkey

Wie gesagt in der Play Framework 2.6-Dokumentation, Sie können einen ' Csrf-Token " - Header mit dem token generiert Spielen:

Wenn Sie Anfragen mit AJAX, können Sie das CSRF-token in der HTML-Seite, und fügen Sie es auf die Anforderung mit der Csrf-Token header.

Innerhalb eines Scala-Vorlage, die Sie bekommen können das token-Wert mit @helper.CSRF.getToken.value

Folgenden jQuerys Dokumentation Sie können entweder einmal für alle Ajax-Anfragen durch die Konfiguration von jQuery mit ajaxSetup

$.ajaxSetup({
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Csrf-Token', '@helper.CSRF.getToken.value');
  }
});

oder alternativ den Header bei jeder Anfrage durch die Konfiguration der headers Objekt wie folgt:

$.ajax({
  url: route.url,
  ...
  headers: {
    'Csrf-Token': '@helper.CSRF.getToken.value'
  }
});

InformationsquelleAutor bmenzel