javascript - ejemplo - ¿Cómo incluir el token CSRF en los encabezados de la solicitud de carga de Dropzone?

dropzone laravel

Question

Estoy trabajando en una aplicación de una sola página y estoy usando Laravel 5 para el servicio web.

Todos los formularios se envían de forma asíncrona y utilizo un beforeSend en ellos para adjuntar el token CSRF que tomo de la metaetiqueta así:

$.ajax({
    url: ''/whatever/route'',
    type: ''POST'',
    dataType: ''JSON'',
    data: $(''form#whatever-form'').serialize(),
    beforeSend: function(request) {
        return request.setRequestHeader(''X-CSRF-Token'', $("meta[name=''token'']").attr(''content''));
    },
    success: function(response){
        rivets.bind($(''#whateverTag''), {whateverData: response});
    },
    error: function(response){
    }
});

Todos mis formularios funcionan bien, pero la carga de Dropzone no funciona. Me devuelve una excepción TokenMismatchException . Aquí está mi código dropzone para actualizar la foto de perfil:

$("#mydropzone").dropzone({
    url: "/profile/update-photo",
    addRemoveLinks : true,
    maxFilesize: 5,
    dictDefaultMessage: ''<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>'',
    dictResponseError: ''Error uploading file!''
});

He intentado poner el beforeSend aquí también:

$("#mydropzone").dropzone({
    url: "/profile/update-photo",
    addRemoveLinks : true,
    maxFilesize: 5,
    dictDefaultMessage: ''<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>'',
    dictResponseError: ''Error uploading file!'',
    beforeSend: function(request) {
        return request.setRequestHeader(''X-CSRF-Token'', $("meta[name=''token'']").attr(''content''));
    },
});

También intenté poner un ajaxSetup global en mi archivo principal así:

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

Todavía no está funcionando. ¿Qué estoy haciendo mal? ¿Cómo puedo pasar el token CSRF en el encabezado con la carga de dropzone para no obtener una excepción?

Answer 1

Puede agregar token csrf para cada solicitud de jquery ajax dentro de su aplicación con estos códigos.

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

Answer 2

Creo que la mejor manera de manejar esto es configurarlo de manera predeterminada para todas las publicaciones de Ajax (con jQuery) de acuerdo con los documentos de Django.

https://docs.djangoproject.com/en/1.8/ref/csrf/#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));
}

function sameOrigin(url) {
    // test that a given url is a same-origin URL
    // url could be relative or scheme relative or absolute
    var host = document.location.host; // host + port
    var protocol = document.location.protocol;
    var sr_origin = ''//'' + host;
    var origin = protocol + sr_origin;
    // Allow absolute or scheme relative URLs to same origin
    return (url == origin || url.slice(0, origin.length + 1) == origin + ''/'') ||
        (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + ''/'') ||
        // or any other URL that isn''t scheme relative or absolute i.e relative.
        !(/^(////|http:|https:).*/.test(url));
}

$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
            // Send the token to same-origin, relative URLs only.
            // Send the token only if the method warrants CSRF protection
            // Using the CSRFToken value acquired earlier
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

En tu ejemplo, tienes un error tipográfico al agregarlo a la publicación de Dropzone.js ajax.

''X-CSRF-Token''

debiera ser

''X-CSRFToken''

Answer 3

Podemos configurar el token CSRF en el encabezado de solicitud.

 xhr = open("POST",logURL,true);
      //Set CSRF token in request header for prevent CSRF attack.
 xhr.setRequestHeader(CSRFHeaderName, CSRFToken);

Answer 4

Está bien, entonces este código está funcionando bien ahora:

$("#mydropzone").dropzone({
    url: "/profile/update-photo",
    addRemoveLinks : true,
    maxFilesize: 5,
    dictDefaultMessage: ''<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>'',
    dictResponseError: ''Error uploading file!'',
    headers: {
        ''X-CSRFToken'': $(''meta[name="token"]'').attr(''content'')
    }
});

Así que, básicamente, necesitaba agregar el X-CSRFToken en el encabezado de la solicitud de Dropzone. Funciona como el encanto ahora.

Answer 5

Para cualquiera que use la configuración predeterminada de Laravel:

window.Laravel = {!! json_encode([
    ''csrfToken'' => csrf_token(),
]) !!};

Dropzone.options.attachments = {
    url: ''upload'',
    headers: {
        ''X-CSRF-TOKEN'': Laravel.csrfToken
    }
}

Answer 6

Esto también funciona bastante bien:

$("#mydropzone").dropzone({
  url: "/profile/update-photo",
  addRemoveLinks : true,
  maxFilesize: 5,
  dictResponseError: ''Error uploading file!'',
  headers: {
    ''X-CSRF-Token'': $(''input[name="authenticity_token"]'').val()
  }
});