Skip to content

Loading…

CSRF token support. #148

Closed
wants to merge 1 commit into from

8 participants

@nathanstitt

I've added CSRF (cross-site request forgery token) support, as I needed it for a rails app which uses the Devise user authentication library.

Looks for a CSRF meta tag on the page, and if found adds a X-CSRF-Token header to the request.

An alternate implementation would be to add an option to either set the csrf token manually, or just one that allows adding arbitrary headers. If you'd prefer I can work something like one of those up.

Thanks for your great work on the library, it's making file uploads much easier for me!

@nathanstitt nathanstitt add CSRF (cross-site request forgery token) if available on page. Nee…
…ded for using Devise/Warden authentication with rails, and also other apps that require a valid token for xhr
9858382
@blueimp
Owner

Thanks for your contribution, but it's already possible to add arbitrary request headers using the requestHeaders option.

This feature was already added about one month ago, but unfortunately I didn't add any documentation.

I've now added a section to the Options documentation (search for "requestHeaders" on the page).
I also just commited an update so this option accepts an Array of Objects with name and value attributes, or a simple Object.

@blueimp blueimp closed this
@nathanstitt

Sorry, I didn't think to look in the code to see if you'd added something for that, just did a quick docs scan. I'll just use that option then.

Thanks again!

@blueimp
Owner

Nah, it's my fault, should have documented it along with adding the feature.

Thanks for using the plugin. :)

@twig

Hi there,

I just took a look at those links and can't seem to find the requestHeader options. Have they been moved?

@blueimp
Owner

Since version 5, the plugin accepts all $.ajax parameters as part of its options object.
You can therefore just make use of the headers option to set additional request headers.

However please note that the Iframe Transport (required by IE and Opera) doesn't support setting request headers.
To implement cross-browser CSRF protection, I would recommend making use of URL parameters, as shown here for the destroy callback:
https://github.com/blueimp/jQuery-File-Upload/wiki/Plugin-extensions

@twig

Thanks for that!

@etdsoft

Using the headers option like this:

  $('#fileupload').fileupload({
    dropZone: $('#dropzone'),
    headers: {
      'X-CSRF-Token': csrf_token
    }
  });

Seems to do the trick for file uploads, however the header is not attached in the destroy action (when clicking the delete button). It seems that the _getAJAXSettings() method is not invoked inside the destroy() handler. @blueimp ?

@blueimp
Owner

That's because deleting files is not part of the core plugin, it's only part of the UI version.
However you can add the header easily by overriding the destroy callback option:

$('#fileupload').fileupload({
    headers: {
        'X-CSRF-Token': csrf_token
    },
    destroy: function (e, data) {
        data.headers = $(this).data('fileupload')
            .options.headers;
        $.blueimpUI.fileupload.prototype.options.destroy
            .call(this, e, data);
    }
});
@etdsoft

Thanks, this did the trick. However, I had to slightly amend the last line based on the Plugin extensions example to include a .options.:

    destroy: function (e, data) {
      data.headers = $(this).data('fileupload').options.headers;
      $.blueimpUI.fileupload.prototype.options.destroy.call(this, e, data);
    }
@blueimp
Owner

You're totally right, the ".options" was missing - I was typing it out of memory, my mistake. :D

@jonasrn

There is the possibility of putting an ajax call inside the method?

$('#fileupload').fileupload({
destroy: function (e, data) {

        var server = "/site/index/deletar";
        $.getJSON(server)
            .done(function(data2) {
                console.log(data2);
                console.log(data);
                $.blueimpUI.fileupload.prototype.options.destroy.call(this, e, data);           


        });


    }
});

when I do that then he give the following error

TypeError: that is undefined
[Parar neste erro]

that._adjustMaxNumberOfFiles(1);

@jedierikb

@blueimp Could you provide an example of how to implement your suggestion for using URL parameters for iframe upload? Finding it difficult to adapt your example of extending options for Delete. Much appreciated.

@junaidatique

Hey,

I am using codeigniter CSRF and I am unable to send the token. Can you please tell me how can I do it.

@gabn88

I might be stupid, but when I do this:

  data.headers = {
        'X-CSRFToken': csrftoken
        },
  $.blueimp.fileupload.prototype.options.destroy.call(this, e, data);

the deletion is working, but it is not removed from the page. $.blueimpUI is not defined for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 6, 2011
  1. @nathanstitt

    add CSRF (cross-site request forgery token) if available on page. Nee…

    nathanstitt committed
    …ded for using Devise/Warden authentication with rails, and also other apps that require a valid token for xhr
Showing with 3 additions and 0 deletions.
  1. +3 −0 jquery.fileupload.js
View
3 jquery.fileupload.js
@@ -192,6 +192,9 @@
},
setRequestHeaders = function (xhr, settings, sameDomain) {
+ var token = $('meta[name="csrf-token"]').attr('content');
+ if (token) xhr.setRequestHeader('X-CSRF-Token', token);
+
if (sameDomain) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
} else if (settings.withCredentials) {
Something went wrong with that request. Please try again.