Blazor Page Redirect - Unhandled exception - a middleware was not found that supports anti-forgery

Question

I am trying to build a web server app using Blazor InteractiveServer, and I want to show custom error pages for error code 400, 404, etc.

My code looks like this

Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents().AddInteractiveServerComponents();

AuthenticationBuilder atbldr;
atbldr = builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme);
atbldr.AddCookie(options =>
{
  options.Cookie.Name = "token";
  options.Cookie.MaxAge = TimeSpan.FromMinutes(60);
  options.LoginPath = "/login";
  options.AccessDeniedPath = "/access-denied";
});

builder.Services.AddAuthorization();
builder.Services.AddCascadingAuthenticationState();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
  app.UseExceptionHandler("/Error", createScopeForErrors: true);
  // The default HSTS value is 30 days. 
  app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAuthentication();
app.UseAuthorization();
app.UseAntiforgery();

app.UseStatusCodePagesWithReExecute("/error/{0}");

app.MapRazorComponents\<App\>()
.AddInteractiveServerRenderMode();

app.Run();

ErrorPg.razor

@page "/errorx/{ErCode:int}"

<figure class="text-center">
    <blockquote class="blockquote">
        <h1 class="display-1">@this.ErCode</h1>
    </blockquote>
    <blockquote class="blockquote">
        <h3 class="h3">@this.ErMsg</h3>
    </blockquote>
</figure>

@code
{
    [Parameter]
    public int ErCode { get; set; } = 404;

    public string ErMsg {get; set; } = "Sorry! Page Not Found."
}

Now when I try to change the visit a non-existing page, it shows this error

An unhandled exception occurred while processing the request. InvalidOperationException: Endpoint /error/{ErCode:int} (/error/{ErCode:int}) contains anti-forgery metadata, but a middleware was not found that supports anti-forgery. Configure your application startup by adding app.UseAntiforgery() in the application startup code. If there are calls to app.UseRouting() and app.UseEndpoints(...), the call to app.UseAntiforgery() must go between them. Calls to app.UseAntiforgery() must be placed after calls to app.UseAuthentication() and app.UseAuthorization().

Microsoft.AspNetCore.Routing.EndpointMiddleware.ThrowMissingAntiforgeryMiddlewareException(Endpoint endpoint)

What middleware is this error talking about and where to add this anti-forgery metadata? Or is there any other way to achieve this?

Answer 1

Through the code you provided, I reproduced the same problem as you. The reason is the calling order of pipeline middleware. Because UseStatusCodePagesWithReExecute middleware is blocked by Antiforgery middleware when redirecting the error page.

Therefore, it is necessary to ensure that it is called after error handling to ensure that all normal requests are verified by anti-counterfeiting.The correct calling order should be :

app.UseStatusCodePagesWithReExecute("/errorx/{0}");
app.UseAntiforgery();

So when I visit a non-existent page: