EditForm and Antiforgery for Blazor Web Assembly

[boukenka]

Hello,

I am trying to add antiforgery protection to the EditForm for login and registration.

I have added the [AutoValidateAntiforgeryToken] attribute for the controller
and the following coding at startup for the server part:

services.AddMvc(options =>
{
     options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
});

The server response is 400 Bad request when a log in operation is submitted.
How to resolve it? Is there an anti-forgery mechanism in EditForm? Or with the addition of @Html.AntiForgeryToken()?

Further technical details

ASP.NET Core version 3.1.2
Blazor WebAssembly 3.2.0 Preview 1
Microsoft Edge 82.0.439.1
It's a Blazor Web Assembly with ASP.NET core hosted
Visual Studio 16.5.0 Preview 5.0

[saber-wang]

https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1#javascript-ajax-and-spas

blazor can also access tokens in cookies and use the cookie's contents to create a header with the token's value.

[boukenka]

Thank you @saber-wang. 😄
But this does not solve the question for a Blazor Web Assembly project model.

[saber-wang]

Can do
https://github.com/saber-wang/BlazorAppFormTset

services.AddAntiforgery(options => options.HeaderName = "X-CSRF-TOKEN");

app.Use(next=>context=> 
            {
                var tokens = antiforgery.GetAndStoreTokens(context);
                context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken,new CookieOptions() {HttpOnly=false });
                return next(context);
            });

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        var token = await JSRuntime.InvokeAsync<string>("getCookie", "XSRF-TOKEN");

        Http.DefaultRequestHeaders.Add("X-CSRF-TOKEN", token);
        forecasts = await Http.PostJsonAsync<WeatherForecast[]>("WeatherForecast", null);
    }

}

function getCookie(cname)
{
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++)
    {
        var arr = ca[i].split('=');
        if (arr[0] == cname)
            return arr[1]
    }
    return "";
}

[RemiBou]

I managed it in this blog post : https://remibou.github.io/CSRF-protection-with-ASPNET-Core-and-Blazor-Week-29/ (it was on one of the early preview but it's still ok), basically you need a bit of jsinterop for parsing the cookies and send this as http header.

[boukenka]

Thank you both @RemiBou and @saber-wang for your help and the time you took to provide me with explanations. 😄 It works!