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>  <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>  <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?
To use it, just include @csrf in your forms to include the token field.
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.
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.
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.
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>  <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.
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') } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With