DevExpress DxUpload component and anti-forgery token problem #5172

7 Answer(s)

• 

  0

  berkansasmaz created one year ago

  Support Team .NET Developer

  Hi,

  The problem may not be related to ABP. Here are some support tickets from DevExpress:

  • https://supportcenter.devexpress.com/ticket/details/t948537/devextreme-fileuploader-how-to-append-the-antiforgery-token-to-upload-requests
  • https://supportcenter.devexpress.com/ticket/details/t694385/fileuploader-antiforgerytoken-issue-in-asp-net-core-2-1

  I hope these resources solve your question. If you get stuck somewhere, don't hesitate to ask :)

  Save Cancel
• 

  0

  Revolution created one year ago

  Thanks for the links, I checked them out. Unfortunately, they only talk about how to send the token, that we have already succeeded, but we get this error: 2023-05-30 16:40:19.206 +02:00 [WRN] The provided antiforgery token was meant for a different claims-based user than the current user.

  We get the token on the razor page as follows: string antiForgeryCookieName = AntiForgeryCookieNameProvider.GetAntiForgeryCookieNameOrNull(); var token = await CookieService.GetAsync(antiForgeryCookieName);

  Posting the edit form on the same razor page to the ABP application service Create method is working. If we catch this request with an IHttpContextAccessor, we can see the same token inside the request cookies.

  

  What could be the cause of the above error?

  Save Cancel
• 

  0

  berkansasmaz created one year ago

  Support Team .NET Developer

  I will test your problem more but before that I have a small request.

  If you haven't tried to get the Antiforgery token as follows, do you have a chance to try it?

  @(Html.DevExtreme().FileUploader()  
      .OnInitialized("OnInitialized")  
  ...  
  

  function OnInitialized(s, e) {  
      var _createFormData = s.component._uploadStrategy._createFormData;  
      s.component._uploadStrategy._createFormData = (fieldName, fieldValue) => {  
          var formData = _createFormData.call(this, fieldName, fieldValue);  
          formData.append('__RequestVerificationToken', document.getElementsByName("__RequestVerificationToken")[0].value);  
          return formData;  
      }  
  }  
  

  The codes I suggest are excerpts from here, so if you need more information on this, you can check it out here.

  The reason I want you to try this is because I think you might have a similar situation with someone who is experiencing the same problem as you in different ways.

  Please let me know the result :)

  Save Cancel
• 

  0

  Revolution created one year ago

  Just to clarify, we are not using the DevExtreme FileUploader widget, but the DxUpload component for Blazor UI. We can try the js widget as well but we already tried adding the token to a form field instead of the header in the DxUpload component. The result was the same. So the token gets to the API but then the validation fails.

  Save Cancel
• 

  0

  berkansasmaz created one year ago

  Support Team .NET Developer

  Instead of getting the XSRF-TOKEN from the cookie, you can get it as follows?

  AntiForgeryManager.GenerateToken()

  Full code example:

  @page "/Upload"
  @using Volo.Abp.AspNetCore.Mvc.AntiForgery
  @inject NavigationManager NavigationManager
  @inject IAbpAntiForgeryManager AntiForgeryManager // added
  <div id="overviewDemoDropZone" class="card custom-drop-zone bg-light rounded-3 w-100 m-0">
      <span class="drop-file-icon mb-3"></span>
      <span>Drag and Drop File Here</span><span class="m-1">or</span>
      <button id="overviewDemoSelectButton" class="btn border-primary btn-primary m-1">Select File</button>
  </div>
  <DxUpload Name="myFile"
            Visible="@UploadVisible"
            ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
            ExternalDropZoneCssSelector="#overviewDemoDropZone"
            ExternalDropZoneDragOverCssClass="bg-light border-secondary text-dark"
            MaxFileSize="15000000"
            UploadUrl="@GetUploadUrl("api/Upload/Upload/")"
            SelectedFilesChanged="@SelectedFilesChanged"
            FileUploadStart="FileUploadStart"
            CssClass="w-100">
      
  
  </DxUpload>
  
  @code {
      bool UploadVisible { get; set; } = false;
  
      protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
          UploadVisible = files.ToList().Count > 0;
          InvokeAsync(StateHasChanged);
      }
      protected string GetUploadUrl(string url) {
          return NavigationManager.ToAbsoluteUri(url).AbsoluteUri;
      }
      
      protected void FileUploadStart(FileUploadStartEventArgs args) {
          args.RequestHeaders.Add("RequestVerificationToken", AntiForgeryManager.GenerateToken()); // changed
      }
  }
  
  

  Save Cancel
• 

  0

  Revolution created one year ago

  Thank you for your help. This is working :)

  Save Cancel

  1
• 

  0

  berkansasmaz created one year ago

  Support Team .NET Developer

  You are welcome :)

  Save Cancel