Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include the CSRF token in the headers in Dropzone upload request?

I am working on a single page application and I am using Laravel 5 for the web service.

All forms are submitted asynchronously and I use a beforeSend on them to attach the CSRF token which I take from the meta tag like so:

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

All my forms work fine but dropzone upload doesn't. It gives me back a TokenMismatchException exception. Here is my dropzone code to update the profile photo:

$("#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!' }); 

I have tried putting the beforeSend in here too:

$("#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'));     }, }); 

I have also tried to put a global ajaxSetup in my main file like so:

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

It is still not working. What am I doing wrong? How can I pass the CSRF token in the header with the dropzone upload so as to not a get an exception?

like image 645
Rohan Avatar asked May 10 '15 07:05

Rohan


People also ask

How do I add a CSRF token?

To use it, just include @csrf in your forms to include the token field.

Can we send CSRF token for GET request?

CSRF GET RequestThe simplest CSRF attack is simply to trick a user into making a GET request to a specific URL. This can done by putting the URL into a deceptively named link. The link could be put in a blog comment (lots of WordPress exploits have used this technique), a post on a web forum, or in a phishing email.

How are CSRF tokens stored?

Server generates CSRF token, stores it against the user session and outputs it to a cookie. User submits form via AJAX or via HTML form. Server checks custom header (or hidden form field) matches session stored token.

How is CSRF token sent to client?

The client acquires a new CSRF token from the server by calling the REST endpoint baseURL/v1/csrf/tokens. The server generates a new, unique CSRF token and sends the token to the client in a custom HTTP response header.


Video Answer


2 Answers

Okay so this code is working just fine now:

$("#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-CSRF-TOKEN': $('meta[name="token"]').attr('content')     } }); 

So basically I needed to add the X-CSRFToken in the header of the Dropzone request. Works like charm now.

like image 95
Rohan Avatar answered Sep 18 '22 19:09

Rohan


You can add csrf token for every jquery ajax request within your application with these code.

$.ajaxSetup({     headers: {         'X-CSRF-Token': $('meta[name="_token"]').attr('content')     } }); 
like image 43
Nyan Lynn Htut Avatar answered Sep 19 '22 19:09

Nyan Lynn Htut