Secure data with Interactive Auto rendering (#34765)

Author: guardrex

aspnetcore/blazor/call-web-api.md

@@ -22,7 +22,7 @@ The [`System.Net.Http.Json`](https://www.nuget.org/packages/System.Net.Http.Json
 
 ## Sample apps
 
-See the sample apps in the [`dotnet/blazor-samples`](https://github.com/dotnet/blazor-samples/) GitHub repository.
+For working examples, see the following sample apps in the [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples/) ([how to download](xref:blazor/fundamentals/index#sample-apps)).
 
 ### `BlazorWebAppCallWebApi`
 
@@ -80,6 +80,8 @@ public class ServerMovieService(MovieContext db) : IMovieService
 }
 ```
 
+For more information on how to secure movie data in this scenario, see the weather data example described by [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering).
+
 ### `BlazorWebAppCallWebApi_Weather`
 
 A weather data sample app that uses streaming rendering for weather data.
@@ -91,6 +93,40 @@ Calls a todo list web API from a Blazor WebAssembly app:
 * `Backend`: A web API app for maintaining a todo list, based on [Minimal APIs](xref:fundamentals/minimal-apis).
 * `BlazorTodo`: A Blazor WebAssembly app that calls the web API with a preconfigured <xref:System.Net.Http.HttpClient> for todo list CRUD operations.
 
+### `BlazorWebAssemblyStandaloneWithIdentity`
+
+A standalone Blazor WebAssembly app secured with ASP.NET Core Identity:
+
+* `Backend`: A backend web API app that maintains a user identity store for ASP.NET Core Identity.
+* `BlazorWasmAuth`: A standalone Blazor WebAssembly frontend app with user authentication.
+
+The solution demonstrates calling a secure web API for the following:
+
+* Obtaining an authenticated user's roles.
+* Data processing for all authenticated users.
+* Data processing for authorized users (the user must be in the `Manager` role) via an [authorization policy](xref:security/authorization/policies).
+
+### `BlazorWebAppOidc`
+
+A Blazor Web App with global Auto interactivity that uses OIDC authentication with Microsoft Entra without using Entra-specific packages. The solution includes a demonstration of obtaining weather data securely via a web API when a component that adopts Interactive Auto rendering is rendered on the client.
+
+### `BlazorWebAppOidcBff`
+
+A Blazor Web App with global Auto interactivity that uses:
+
+* OIDC authentication with Microsoft Entra without using Entra-specific packages.
+* The [Backend for Frontend (BFF) pattern](/azure/architecture/patterns/backends-for-frontends), which is a pattern of app development that creates backend services for frontend apps or interfaces.
+
+The solution includes a demonstration of obtaining weather data securely via a web API when a component that adopts Interactive Auto rendering is rendered on the client.
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-9.0"
+
+### `BlazorWebAppEntra`
+
+A Blazor Web App with global Auto interactivity that uses [Microsoft identity platform](/entra/identity-platform/)/[Microsoft Identity Web packages](/entra/msal/dotnet/microsoft-identity-web/) for [Microsoft Entra ID](https://www.microsoft.com/security/business/microsoft-entra). The solution includes a demonstration of obtaining weather data securely via a web API when a component that adopts Interactive Auto rendering is rendered on the client.
+
 :::moniker-end
 
 ## Client-side scenarios for calling external web APIs
@@ -1050,9 +1086,21 @@ Various network tools are publicly available for testing web API backend apps di
 
 ### General
 
+:::moniker range=">= aspnetcore-8.0"
+
+* [Cross-Origin Resource Sharing (CORS) at W3C](https://www.w3.org/TR/cors/)
+* <xref:security/cors>: Although the content applies to ASP.NET Core apps, not Razor components, the article covers general CORS concepts.
+* [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering)
+
+:::moniker-end
+
+:::moniker range="< aspnetcore-8.0"
+
 * [Cross-Origin Resource Sharing (CORS) at W3C](https://www.w3.org/TR/cors/)
 * <xref:security/cors>: Although the content applies to ASP.NET Core apps, not Razor components, the article covers general CORS concepts.
 
+:::moniker-end
+
 ### Mitigation of overposting attacks
 
 Web APIs can be vulnerable to an *overposting* attack, also known as a *mass assignment* attack. An overposting attack occurs when a malicious user issues an HTML form POST to the server that processes data for properties that aren't part of the rendered form and that the developer doesn't wish to allow users to modify. The term "overposting" literally means that the malicious user has *over*-POSTed with the form.

aspnetcore/blazor/components/render-modes.md

@@ -971,6 +971,7 @@ To address this scenario, inject the service in a new imports file placed in the
 * <xref:blazor/js-interop/ssr>
 * [Cascading values/parameters and render mode boundaries](xref:blazor/components/cascading-values-and-parameters#cascading-valuesparameters-and-render-mode-boundaries): Also see the [Root-level cascading parameters](xref:blazor/components/cascading-values-and-parameters#root-level-cascading-parameters) section earlier in the article.
 * <xref:blazor/components/class-libraries-with-static-ssr>
+* [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering)
 
 :::moniker-end
 
@@ -979,5 +980,6 @@ To address this scenario, inject the service in a new imports file placed in the
 * <xref:blazor/js-interop/ssr>
 * [Cascading values/parameters and render mode boundaries](xref:blazor/components/cascading-values-and-parameters#cascading-valuesparameters-and-render-mode-boundaries): Also see the [Root-level cascading parameters](xref:blazor/components/cascading-values-and-parameters#root-level-cascading-parameters) section earlier in the article.
 * <xref:blazor/components/class-libraries-with-static-ssr>
+* [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering)
 
 :::moniker-end

aspnetcore/blazor/security/blazor-web-app-with-entra.md

@@ -263,6 +263,10 @@ Alternatively, use the following `LogInOrOut` component, which doesn't supply a
 </div>
 ```
 
+## Weather data security
+
+For more information on how this app secures its weather data, see [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering).
+
 ## Troubleshoot
 
 [!INCLUDE[](~/blazor/security/includes/troubleshoot-server.md)]

aspnetcore/blazor/security/blazor-web-app-with-oidc.md

@@ -430,7 +430,7 @@ The following <xref:Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConn
 Inspect the sample app for the following features:
 
 * Automatic non-interactive token refresh with the help of a custom cookie refresher (`CookieOidcRefresher.cs`).
-* The `Weather` component uses the [`[Authorize]` attribute](xref:Microsoft.AspNetCore.Authorization.AuthorizeAttribute) to prevent unauthorized access. For more information on requiring authorization across the app via an [authorization policy](xref:security/authorization/policies) and opting out of authorization at a subset of public endpoints, see the [Razor Pages OIDC guidance](xref:security/authentication/configure-oidc-web-authentication#force-authorization).
+* The `Weather` component uses the [`[Authorize]` attribute](xref:Microsoft.AspNetCore.Authorization.AuthorizeAttribute) to prevent unauthorized access. For more information on requiring authorization across the app via an [authorization policy](xref:security/authorization/policies) and opting out of authorization at a subset of public endpoints, see the [Razor Pages OIDC guidance](xref:security/authentication/configure-oidc-web-authentication#force-authorization). For more information on how this app secures weather data, see [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering).
 
 :::zone-end
 
@@ -1022,3 +1022,4 @@ At this point, Razor components can adopt [role-based and policy-based authoriza
 * [`AuthenticationStateProvider` service](xref:blazor/security/index#authenticationstateprovider-service)
 * [Manage authentication state in Blazor Web Apps](xref:blazor/security/index#manage-authentication-state-in-blazor-web-apps)
 * [Refresh token during http request in Blazor Interactive Server with OIDC (`dotnet/aspnetcore` #55213)](https://github.com/dotnet/aspnetcore/issues/55213)
+* [Secure data in Blazor Web Apps with Interactive Auto rendering](xref:blazor/security/index#secure-data-in-blazor-web-apps-with-interactive-auto-rendering)

aspnetcore/blazor/security/index.md

@@ -583,6 +583,183 @@ To handle authentication, use the built-in or custom <xref:Microsoft.AspNetCore.
 
 For more information on client-side authentication, see <xref:blazor/security/webassembly/index>.
 
+:::moniker range=">= aspnetcore-8.0"
+
+## Secure data in Blazor Web Apps with Interactive Auto rendering
+
+When a Blazor Web App adopts server-side rendering (SSR) and client-side rendering (CSR) for components or an entire app that specifies the [Interactive Auto render mode](xref:blazor/components/render-modes#automatic-auto-rendering), authorization to access components and data is applied in *two places*. The component restricts access to itself (and any data that it obtains) when rendered on the server by virtue of an authorization attribute in the component's definition file (`@attribute [Authorize]`). When the component is rendered on the client, access to data is restricted via the server web API endpoints that are called from the client. Care must be taken when securing data access in both locations to prevent improper data access.
+
+Consider the following scenario where secure weather data is displayed by a component. The following example can be examined and demonstrated in a running sample app with either the `BlazorWebAppEntra` sample (.NET 9 or later) or the `BlazorWebAppOidc` sample (.NET 8 or later) in the [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) ([how to download](xref:blazor/fundamentals/index#sample-apps)).
+
+The client project maintains a `WeatherForecast` class to hold weather data:
+
+```csharp
+public sealed class WeatherForecast(DateOnly date, int temperatureC, string summary)
+{
+    public DateOnly Date { get; set; } = date;
+    public int TemperatureC { get; set; } = temperatureC;
+    public string? Summary { get; set; } = summary;
+    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+}
+```
+
+The client project's `IWeatherForecaster` interface defines a `GetWeatherForecastAsync` method for obtaining weather data:
+
+```csharp
+public interface IWeatherForecaster
+{
+    Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync();
+}
+```
+
+The client project's `ClientWeatherForecaster` service implements `IWeatherForecaster`. The `GetWeatherForecastAsync` method calls a web API in the server project at the `/weather-forecast` endpoint for weather data:
+
+```csharp
+internal sealed class ClientWeatherForecaster(HttpClient httpClient) 
+    : IWeatherForecaster
+{
+    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync() =>
+        await httpClient.GetFromJsonAsync<WeatherForecast[]>("/weather-forecast") ??
+            throw new IOException("No weather forecast!");
+}
+```
+
+The client project maintains a `Weather` component that:
+
+* Enforces authorization with an [`[Authorize]` attribute](xref:Microsoft.AspNetCore.Authorization.AuthorizeAttribute).
+* Uses the [Persistent Component State service](xref:blazor/components/prerender#persist-prerendered-state) (<xref:Microsoft.AspNetCore.Components.PersistentComponentState>) to persist weather forecast data when the component transitions from static to interactive SSR on the server.
+
+```razor
+@page "/weather"
+@using Microsoft.AspNetCore.Authorization
+@using BlazorWebAppEntra.Client.Weather
+@attribute [Authorize]
+@implements IDisposable
+@inject PersistentComponentState ApplicationState
+@inject IWeatherForecaster WeatherForecaster
+
+<PageTitle>Weather</PageTitle>
+
+<h1>Weather</h1>
+
+<p>This component demonstrates showing data.</p>
+
+@if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th aria-label="Temperature in Celsius">Temp. (C)</th>
+                <th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var forecast in forecasts)
+            {
+                <tr>
+                    <td>@forecast.Date.ToShortDateString()</td>
+                    <td>@forecast.TemperatureC</td>
+                    <td>@forecast.TemperatureF</td>
+                    <td>@forecast.Summary</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private IEnumerable<WeatherForecast>? forecasts;
+    private PersistingComponentStateSubscription persistingSubscription;
+
+    protected override async Task OnInitializedAsync()
+    {
+        persistingSubscription = ApplicationState.RegisterOnPersisting(PersistData);
+
+        if (!ApplicationState.TryTakeFromJson<IEnumerable<WeatherForecast>>(
+            nameof(forecasts), out var restoredData))
+        {
+            forecasts = await WeatherForecaster.GetWeatherForecastAsync();
+        }
+        else
+        {
+            forecasts = restoredData!;
+        }
+    }
+
+    private Task PersistData()
+    {
+        ApplicationState.PersistAsJson(nameof(forecasts), forecasts);
+
+        return Task.CompletedTask;
+    }
+
+    void IDisposable.Dispose() => persistingSubscription.Dispose();
+}
+```
+
+The server project implements `IWeatherForecaster` as `ServerWeatherForecaster`, which generates and returns mock weather data via its `GetWeatherForecastAsync` method:
+
+```csharp
+public class ServerWeatherForecaster() : IWeatherForecaster
+{
+    public readonly string[] summaries =
+    [
+        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", 
+        "Sweltering", "Scorching"
+    ];
+
+    public async Task<IEnumerable<WeatherForecast>> GetWeatherForecastAsync()
+    {
+        // Simulate asynchronous loading to demonstrate streaming rendering
+        await Task.Delay(500);
+
+        return Enumerable.Range(1, 5).Select(index =>
+            new WeatherForecast
+            (
+                DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
+                Random.Shared.Next(-20, 55),
+                summaries[Random.Shared.Next(summaries.Length)]
+            ))
+        .ToArray();
+    }
+}
+```
+
+The server project maintains a secure web API endpoint for client weather data calls:
+
+```csharp
+app.MapGet("/weather-forecast", (
+    [FromServices] IWeatherForecaster WeatherForecaster) =>
+{
+    return WeatherForecaster.GetWeatherForecastAsync();
+}).RequireAuthorization();
+```
+
+Using the preceding approach, there are two systems in place to supply secure weather data to the user:
+
+* When the `Weather` component is rendered *on the server*, the `ServerWeatherForecaster` service's `GetWeatherForecastAsync` method is used directly to obtain the weather data. The security of the data is enforced by the component's [`[Authorize]` attribute](xref:Microsoft.AspNetCore.Authorization.AuthorizeAttribute). In summary, the security of the weather data is enforced by the component.
+* When the `Weather` component is rendered *on the client*, the `ClientWeatherForecaster` service is used to make a web API call to the secure `/weather-forecast` endpoint that applies the <xref:Microsoft.AspNetCore.Builder.AuthorizationEndpointConventionBuilderExtensions.RequireAuthorization%2A> extension method. If the user has the authority to access weather data, the endpoint uses the `ServerWeatherForecaster` service to call `GetWeatherForecastAsync`. The data is returned to the client. In summary, the security of the weather data is enforced by the server app's web API endpoint.
+
+The preceding approach works well when the security requirements of the web API match the security requirements of the component. For example, the same authorization policy can be applied to both the web API endpoint and the component.
+
+Complex scenarios require additional planning and implementation. For example, a server web API that has multiple callers with different access permissions either requires a more sophisticated authorization policy, one or more additional policies, or additional endpoints with different access requirements.
+
+As you build security into apps that adopt Interactive Auto rendering, be mindful that the security implemented for the server's web API endpoints doesn't secure the server's service implementation that's used when a component is rendered on the server and accesses data through the service. Carefully weigh the difference between accessing data on the server during SSR versus accessing the data on a client web API request during CSR. Strategically apply security to avoid improper access to data.
+
+Examples in the [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples/) ([how to download](xref:blazor/fundamentals/index#sample-apps)) that demonstrate the approach described in this section:
+
+* `BlazorWebAppOidc`
+* `BlazorWebAppOidcBff`
+* `BlazorWebAppEntra`
+
+:::moniker-end
+
 ## `AuthenticationStateProvider` service
 
 :::moniker range=">= aspnetcore-8.0"