DevExpress DxUpload component and anti-forgery token problem #5172 | Support

Revolution created one year ago

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)

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 :)
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?
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 :)
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.

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
    }
}

0

Revolution created one year ago

Thank you for your help. This is working :)

1
0

berkansasmaz created one year ago
Support Team .NET Developer

You are welcome :)

Have an answer to this question? Log in and write your answer.