We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Anti-Forgery token on post request to FileActionDefault

Thread ID:

Created:

Updated:

Platform:

Replies:

123367 Mar 10,2016 09:20 PM UTC Mar 17,2016 08:40 AM UTC JavaScript 6
loading
Tags: ejFileExplorer
Wouter
Asked On March 10, 2016 09:20 PM UTC

 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
Replied On March 11, 2016 09:19 AM UTC

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

Balamurugan P [Syncfusion]
Replied On March 11, 2016 01:08 PM UTC

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
Replied On March 14, 2016 11:05 AM UTC

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 [Syncfusion]
Replied On March 15, 2016 08:48 AM UTC

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

Wouter
Replied On March 16, 2016 09:30 AM UTC

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 [Syncfusion]
Replied On March 17, 2016 08:40 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;