Anti-Forgery token on post request to FileActionDefault

[Wouter]

 We're trying to incorporate the FileExplorer into our product. In our software we check every Post request for the Anti-Forgery token (Because of csrf, which will be relatively easy if the target is a file structure). How can I manipulate the request the FileExplorer does? We're looking in the headers and form values for the token so ideally we should add a header value to the XMLHttpRequest. I found the FileExplorerProperties.BeforeAjaxRequest property, but dont know how to use it.

[Wouter]

I added the token to the querystring, and check for the token in our custom AuthorizeAttribute

[Balamurugan P]

Hi Wouter,

Thanks for using Syncfusion Products

Query:  Add a header to the XMLHttpRequest

We have analyzed your requirement and you can achieve this by using “ajaxSettings” API of FileExplorer control. To add custom headers in the Ajax request, please refer following code block.

Code example [JavaScript]:

$(function () {

    $("#fileExplorer").ejFileExplorer({

        path: "http://mvc.syncfusion.com/ODataServices/FileBrowser/",

        ajaxAction: "http://mvc.syncfusion.com/OdataServices/fileExplorer/fileoperation/doJSONAction",

        ajaxSettings: {

            // Using “beforeSend” event, you can specify your custom method.

            read: { beforeSend: beforeAjaxRequest },

            createFolder: { beforeSend: beforeAjaxRequest },

            remove: { beforeSend: beforeAjaxRequest },

            rename: { beforeSend: beforeAjaxRequest },

            paste: { beforeSend: beforeAjaxRequest },

            getDetails: { beforeSend: beforeAjaxRequest },

            search: { beforeSend: beforeAjaxRequest }

        }

    });

});

function beforeAjaxRequest(xhr) {

    xhr.setRequestHeader('x-requested-with', 'some value');

}

In case, if you are using our online http://mvc.syncfusion.com/OdataServices service for handling server side operations of FIleExplorer, you are not able to add “X-CSRFToken” header that is used to solve CSRF problem. Because we have not specified this in “Access-Control-Allow-Headers” part of our online server (http://mvc.syncfusion.com/OdataServices).

We have prepared a MVC sample for your requirement and you can find the sample under the following location

Sample: http://www.syncfusion.com/downloads/support/forum/123367/ze/FileExplorer_(2)-104246859

Query:  I found the FileExplorerProperties.BeforeAjaxRequest property, but dont know how to use it.

Please refer following code block to use FileExplorerProperties.BeforeAjaxRequest Property

@(Html.EJ().FileExplorer("fileExplorer")

    .Path("~/content/images/FileExplorer/FileExplorerContent/")

    .AjaxAction(@Url.Content("/FileExplorer/FileActionDefault"))

    .ClientSideEvents(eve => eve.BeforeAjaxRequest("beforeAjaxRequest"))   

)

</div>

<script type="text/javascript">

    function beforeAjaxRequest(args) {

        //Add your code block

    }

</script>

Online API Documentation: http://help.syncfusion.com/js/api/ejfileexplorer  (Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components)

Please let us know if you have any queries.

Regards,

Balamurugan

[Wouter]

Thanks! We already had a method like beforeAjaxRequest in the js code, so this works perfect. We're using our own controller action to handle the file explorer requests.

Thanks for the link to the api reference. I was searching for it at the control pages. I'm mainly using the JS approach because that fits our style better, so the api reference is much appreciated!

[Saranya CJ]

Hi Wouter,
Thank you for your feedback. Please let us know if you require any other assistance.
Regards,
Saranya

[Wouter]

Instead of defining a bunch of handlers we intercept the ajax request with jquery like this:

$(document).ajaxSend(function(event, xhr, settings) {
            // This will set the token for asp.net mvc:
            xhr.setRequestHeader("__RequestVerificationToken", securityToken);
        });

[Balamurugan P]

Hi Wouter,

Yes, this is also a possible way to add the header in Ajax request. Whenever an Ajax request is about to be sent, jQuery triggers the “ajaxSend” event. Using this event, you can add the specified header in that Ajax request.

Also instead of adding this header in all Ajax request that is to be sent, you can add this header to particular Ajax requests only, which is send by FileExplorer. Please refer following code block.

       var localServ = "http://mvc.syncfusion.com/OdataServices/fileExplorer/fileoperation/doJSONAction";    

       $(document).ajaxSend(function(event, xhr, settings) { 

       //specified header will be added to "FileExplorer" related Ajax request only.

       //”localServ” contains the URL of server side Ajax handling method of FileExplorer

       if ( settings.url == localServ ) {

              xhr.setRequestHeader("x-requested-with", "securityToken");

           }

       });

      

       $(function () {             

           $("#fileExplorer").ejFileExplorer({               

               path: "http://mvc.syncfusion.com/ODataServices/FileBrowser/",

               ajaxAction: localServ

           });

       });

Reference link for “ajaxSend” event: http://api.jquery.com/ajaxSend/ 

We have prepared a sample that will set the token for ASP.NET MVC and you can find under following location

Sample: http://www.syncfusion.com/downloads/support/forum/123367/ze/FileExplorer_(3)-2145880733
Note: We may also use “jQuery.ajaxSetup()” but it has some drawbacks, refer below link https://api.jquery.com/jquery.ajaxsetup/

Please let us know, if you have any queries.

Regards,

Balamurugan