Sending Antiforgery Token with File Manager Server Requests

[Ehab Zaky]

Dear Support Team,

I am implementing a file manager control in ASP.NET Core Razor Page. I have placed the methods below in the page code behind file

  #region FileOperations

  public IActionResult OnGetFileOperations([FromBody] FileManagerDirectoryContent args)

  {

    // Restricting modification of the root folder

    if (args.Action == "delete" || args.Action == "rename")

    {

      if ((args.TargetPath == null) && (args.Path == ""))

      {

        FileManagerResponse response = new FileManagerResponse();

        ErrorDetails er = new ErrorDetails

        {

          Code = "401",

          Message = "Restricted to modify the root folder."

        };

        response.Error = er;

        return new JsonResult(this.operation.ToCamelCase(response));

      }

    }

    // Processing the File Manager operations

    switch (args.Action)

    {

      case "read":

        // Path - Current path; ShowHiddenItems - Boolean value to show/hide hidden items

        return new JsonResult(this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems)));

      case "delete":

        // Path - Current path where of the folder to be deleted; Names - Name of the files to be deleted

        return new JsonResult(this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names)));

      case "copy":

        // Path - Path from where the file was copied; TargetPath - Path where the file/folder is to be copied; RenameFiles - Files with same name in the copied location that is confirmed for renaming; TargetData - Data of the copied file

        return new JsonResult(this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)));

      case "move":

        // Path - Path from where the file was cut; TargetPath - Path where the file/folder is to be moved; RenameFiles - Files with same name in the moved location that is confirmed for renaming; TargetData - Data of the moved file

        return new JsonResult(this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData)));

      case "details":

        // Path - Current path where details of file/folder is requested; Name - Names of the requested folders

        return new JsonResult(this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names)));

      case "create":

        // Path - Current path where the folder is to be created; Name - Name of the new folder

        return new JsonResult(this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name)));

      case "search":

        // Path - Current path where the search is performed; SearchString - String typed in the searchbox; CaseSensitive - Boolean value which specifies whether the search must be casesensitive

        return new JsonResult(this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive)));

      case "rename":

        // Path - Current path of the renamed file; Name - Old file name; NewName - New file name

        return new JsonResult(this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName)));

    }

    return null;

  }

  #endregion

  #region Upload

  public IActionResult OnGetUpload(string path, IList<IFormFile> uploadFiles, string action)

  {

    // Here we have restricted the upload operation for our online samples

    if (Response.HttpContext.Request.Host.Value == "ej2.syncfusion.com")

    {

      Response.Clear();

      Response.ContentType = "application/json; charset=utf-8";

      Response.StatusCode = 403;

      Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install Syncfusion Essential Studio on your machine and run the demo";

    }

    // Use below code for performing upload operation

    else

    {

      FileManagerResponse uploadResponse;

      //Invoking upload operation with the required paramaters

      // path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload)

      uploadResponse = operation.Upload(path, uploadFiles, action, null);

    }

    return Content("");

  }

  #endregion Upload

  #region Download

  // Processing the Download operation

  public IActionResult OnGetDownload(string downloadInput)

  {

    FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);

    //Invoking download operation with the required paramaters

    // path - Current path where the file is downloaded; Names - Files to be downloaded;

    return operation.Download(args.Path, args.Names);

  }

  #endregion Download

I need to know if I am implementing it correctly? In addition I need to send antiforgerytoken with server requests as the above methods not being called due to antiforgery protection.

Regards,

Ehab Zaky

[SureshRajan Alagarsamy]

Hi Ehab,

Greetings from Syncfusion spport.

We have reviewed your query and understand that you are looking to send the Antiforgery token from the client side to the server side in the File Manager component. We would like to let you know that, in the core with razor page, the Antiforgery token validation is enabled by default.

To achieve this requirement, we have used “@Html.AntiForgeryToken()” to generate a hidden form field containing a unique Antiforgery token. After that, in the “beforeSend” event handler, we have fetched the Antiforgery token value from a hidden input field and then set that token as a custom header ("XSRF-TOKEN"). In this way, you can pass the Antiforgery token from the client side to the server side.

Also, on the server side, which is the controller part, we need to include the [ValidateAntiForgeryToken] attribute to validate the token.

Refer to the below code snippet for further reference.

[Index.cshtml]

 

...

@inject IAntiforgery antiforgery

 

@Html.AntiForgeryToken()

 

<div class="control-section">

    <div class="sample-container" style="padding:10px">

        <!--  Filemanager element declaration -->

        <ejs-filemanager id="file" beforeSend="OnBeforeSend">

                 ....

        </ejs-filemanager>

    </div>

 

    <script>

        function OnBeforeSend(args) {

            var tokenValue = document.querySelector('input[name="__RequestVerificationToken"]').value;

            args.ajaxSettings.beforeSend = function (args) {

                args.httpRequest.setRequestHeader("XSRF-TOKEN", tokenValue);

            };

        }

 

    </script>

</div>

[HomeController.cs]

 

namespace CoreWebApplication.Controllers

{

    [ValidateAntiForgeryToken]

    public class HomeController : Controller

    {

        private readonly ILogger<HomeController> _logger;

        public PhysicalFileProvider operation;

        public string basePath;

        string root = "wwwroot\\Files";

 

        ...

     }

     ....

 

}

[Program.cs]

 

builder.Services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

 

...

Check out the attached sample and get back to us if you need any further assistance.

Regards,
Suresh.

Attachment: CoreFileManagerAntiforgeryToken_4902d98d.zip