por - jQuery añade token CSRF a todos los datos de las solicitudes $.post()

laravel post

Question

Estoy trabajando en una aplicación Laravel 5 que tiene habilitada la protección CSRF por defecto para todas las solicitudes POST. Me gusta esta seguridad adicional, así que estoy tratando de trabajar con ella.

Al realizar una solicitud $.post() simple recibí un error ''Illuminate/Session/TokenMismatchException'' porque la entrada de formulario requerida _token faltaba en los datos POST. Aquí hay un ejemplo de una solicitud de $ .post en cuestión:

var userID = $("#userID").val();
$.post(''/admin/users/delete-user'', {id:userID}, function() {
// User deleted
});

Tengo mi token CSRF almacenado como un meta campo en mi encabezado y puedo acceder fácilmente usando:

var csrf_token = $(''meta[name="csrf-token"]'').attr(''content'');

¿Es posible agregar esto a los datos json en todas las solicitudes salientes $.post() ? Intenté usar encabezados, pero Laravel no pareció reconocerlos.

var csrf_token = $(''meta[name="csrf-token"]'').attr(''content'');
alert(csrf_token);
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
    if (options[''type''].toLowerCase() === "post") {
        jqXHR.setRequestHeader(''X-CSRFToken'', csrf_token);
    }
});

Answer 1

Creo que la solución anterior podría no funcionar tan bien. Cuando tu lo hagas:

var x; 
x + ""
// "undefined" + empty string coerces value to string 

Obtendrás datos como "undefined_token = xxx"

Cuando utilizas la solución anterior para eliminar laravel, por ejemplo, tienes que marcar de esta manera:

if (typeof options.data === "undefined")
    options.data = "";
else
    options.data += "&";
options.data = "_token=" + csrf_token;

Answer 2

Su enfoque $.ajaxPrefilter es bueno. No es necesario agregar un encabezado, sin embargo; simplemente necesita agregar una propiedad a la cadena de data .

Los datos se proporcionan como el segundo argumento para $.post , y luego formateados como una cadena de consulta ( id=foo&bar=baz&... ) antes de que el prefiltro acceda a la opción de data . Por lo tanto, debe agregar su propio campo a la cadena de consulta:

var csrf_token = $(''meta[name="csrf-token"]'').attr(''content'');
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
    if (options.type.toLowerCase() === "post") {
        // initialize `data` to empty string if it does not exist
        options.data = options.data || "";

        // add leading ampersand if `data` is non-empty
        options.data += options.data?"&":"";

        // add _token entry
        options.data += "_token=" + csrf_token;
    }
});

Esto convertirá id=userID en id=userID&_token=csrf_token .

Answer 3

De la documentación de Laravel:

Podría, por ejemplo, almacenar el token en una etiqueta "meta":

Una vez que haya creado la metaetiqueta, puede instruir a una biblioteca como jQuery para que agregue el token a todos los encabezados de solicitud. Esto proporciona una protección CSRF simple y conveniente para sus aplicaciones basadas en AJAX:

$ .ajaxSetup ({headers: {''X-CSRF-TOKEN'': $ (''meta [nombre = "csrf-token"]''). attr (''contenido'')}});

Entonces, por ejemplo, puede hacer la solicitud como a continuación.

Agregue esta metaetiqueta a su vista:

<meta name="csrf-token" content="{{ csrf_token() }}">

Y este es un script de ejemplo que puede comunicar con Laravel (envía una solicitud cuando hace clic en un elemento con id = "some-id" y puede ver la respuesta en un elemento con id = "resultado"):

<script type="text/javascript">
    $(document).ready(function(){

        $.ajaxSetup({
            headers:
            { ''X-CSRF-TOKEN'': $(''meta[name="csrf-token"]'').attr(''content'') }
        });

        $("#some-id").on("click", function () {
            var request;


            request = $.ajax({
                url: "/your/url",
                method: "POST",
                data:
                {
                    a: ''something'',
                    b: ''something else'',
                },
                datatype: "json"
            });

            request.done(function(msg) {
                $("#result").html(msg);
            });

            request.fail(function(jqXHR, textStatus) {
                $("#result").html("Request failed: " + textStatus);
            });
        });

    });
</script>

Answer 4

En general, estoy de acuerdo con el concepto que Kornel sugirió excepto una cosa.

Sí, los consejos de Laravel docs para usar $.ajaxSetup , pero no se recomienda ya que este método afecta todas las solicitudes ajax subsiguientes. Es más correcto establecer las configuraciones de Ajax para cada solicitud. Aunque puedes volver a configurar cosas:

Todas las llamadas Ajax subsiguientes que usen cualquier función usarán la nueva configuración, a menos que sean anuladas por las llamadas individuales, hasta la próxima invocación de $ .ajaxSetup ()

Si usa $.ajax() , es más conveniente utilizar propiedades de data o headers . Laravel permite CSRF-token como un parámetro de solicitud o un encabezado.

Primero, agregue la siguiente metaetiqueta en la vista

<meta name="csrf-token" content="{{ csrf_token() }}">

Y luego haz una solicitud de AJAX de cualquier forma:

$.ajax({
    url: "/your/url",
    method: "POST",
    data:
    {
        a: ''something'',
        b: ''something else'',
        _token: $(''meta[name="csrf-token"]'').attr(''content'')
    },
    datatype: "json"
});

O

$.ajax({
    url: "/your/url",
    method: "POST",
    data:
    {
        a: ''something'',
        b: ''something else'',
    },
    headers: 
    {
        ''X-CSRF-TOKEN'': $(''meta[name="csrf-token"]'').attr(''content'')
    }
    datatype: "json"
});

Answer 5

La documentación de Django en CSRF brinda un buen fragmento de código con ajaxSetup para agregar automáticamente el encabezado apropiado a todos los tipos de solicitud donde sea importante:

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