¿Cómo pasar el token CSRF en una solicitud de publicación AJAX para un formulario?

Solución:

De acuerdo, después de luchar contra esto durante unas horas y tratar de descifrar la documentación de Play sobre el tema, que con frecuencia carece de contexto, lo tengo.

Entonces, de sus documentos:

Para permitir una protección simple para las solicitudes que no son del navegador, Play solo verifica las solicitudes con cookies en el encabezado. Si realiza solicitudes con AJAX, puede colocar el token CSRF en la página HTML y luego agregarlo a la solicitud utilizando el Csrf-Token encabezamiento.

Y luego no hay código ni ejemplo. Gracias Play. Muy descriptivo. De todos modos, así es como:

en tus view.html.formTemplate podría escribir en 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>

Y esto se mostrará así cuando se entregue al cliente:

<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, casi ahí, ahora tenemos que crear nuestra llamada AJAX. Tengo todos los míos en un archivo main.js separado, pero también puedes poner esto en tu view.html.formTemplate si tu quieres.

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

});

Con esta línea:
var token = $('input[name="csrfToken"]').attr('value')
Está sacando el token CSRF generado automáticamente en su campo de formulario y tomando su valor en una var para usar en su Javascript.

La otra parte importante de todo lo que AJAX está aquí:

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

Utilizando el $.ajaxSetup, puede configurar lo que hay en el encabezado. Esto es lo que tienes que inferir de su documentación:

agréguelo a la solicitud utilizando el encabezado Csrf-Token.

¡Buena suerte! Avísame si esto está claro.

---

Nota: cuando use lusca, use X-CSRF-Token en lugar de Csrf-Token.

De JSP

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

Esta es la forma más simple que funcionó para mí después de luchar durante 3 horas, solo obtenga el token del campo oculto de entrada como este y mientras realiza la solicitud AJAX solo necesita pasar este token en el encabezado de la siguiente manera: –

De JQuery

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

Desde JavaScript simple

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

Solicitud final de AJAX

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

Ahora no necesita deshabilitar la seguridad crsf en la configuración web, y esto tampoco le dará el error 405 (Método no permitido) en la consola.

Espero que esto ayude a la gente .. !!

agréguelo a la solicitud usando el Csrf-Token encabezamiento.

Gracias NateH06 para el nombre del encabezado! Estaba tratando de enviar el token csrf para un botón “eliminar” con una llamada a la función ajax y estaba atascado en lo siguiente:

@import helper._
....
<button id="deleteBookBtn" class="btn btn-danger"
        data-csrf-name="@helper.CSRF.getToken.name"
        data-csrf-value="@helper.CSRF.getToken.value"
        data-delete-url="@routes.BooksController.destroy(book.id)"
        data-redirect-url="@routes.HomeController.index()">Delete</button>

No pude agregar js en línea dentro del onclick() evento debido a un CSP configurado en el juego 2.6 también.

Se negó a ejecutar el controlador de eventos en línea porque viola la siguiente directiva de política de seguridad de contenido: “default-src ‘self'”.

Y en el archivo JS:

function sendDeleteRequest(event) {
  url = event.target.getAttribute("data-delete-url")
  redirect = event.target.getAttribute("data-redirect-url")
  csrfTokenName = event.target.getAttribute("data-csrf-name")
  csrfTokenValue = event.target.getAttribute("data-csrf-value")
  $.ajax({
    url: url,
    method: "DELETE",
    beforeSend: function(request) {
      //'Csrf-Token' is the expected header name, not $csrfTokenName
      request.setRequestHeader(/*$csrfTokenName*/'Csrf-Token', csrfTokenValue);
    },
    success: function() {
      window.location = redirect;
    },
    error: function() {
      window.location.reload();
    }
  })
}

var deleteBookBtn = document.getElementById("deleteBookBtn");
if(deleteBookBtn) {
    deleteBookBtn.addEventListener("click", sendDeleteRequest);
}

Después de configurar el nombre del encabezado como 'Csrf-Token' ¡la llamada ajax funciona perfectamente!

---

---

Utiliza Nuestro Buscador