Open Closed

DevExpress DxUpload component and anti-forgery token problem #5172


User avatar
0
Revolution created
  • ABP Framework version: v7.2.1
  • UI type: Blazor Server
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

Hi,

In our ABP Commercial (Blazor Server UI) project, we are testing the DevExpress DxUpload component for file upload. This calls an endpoint created in an API controller to handle the upload process. The problem is that by default we get the following error: 2023-05-30 16:28:59.734 +02:00 [WRN] The required antiforgery request token was not provided in either form field "__RequestVerificationToken" or header value "RequestVerificationToken".

So we retrieved the required token as follows: string antiForgeryCookieName = AntiForgeryCookieNameProvider.GetAntiForgeryCookieNameOrNull(); var token = await CookieService.GetAsync(antiForgeryCookieName);

We added this token to the request header with the RequestVerificationToken key. However, we received the following error message: 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.

How can we send the proper token?

Thanks, Peter


7 Answer(s)
  • User Avatar
    0
    berkansasmaz created
    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 :)

  • User Avatar
    0
    Revolution created

    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?

  • User Avatar
    0
    berkansasmaz created
    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 :)

  • User Avatar
    0
    Revolution created

    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.

  • User Avatar
    0
    berkansasmaz created
    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
        }
    }
    
    
  • User Avatar
    0
    Revolution created

    Thank you for your help. This is working :)

  • User Avatar
    0
    berkansasmaz created
    Support Team .NET Developer

    You are welcome :)

Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38