Blazor（WASM/Server）.NET8中无需URL参数安全传递数据的方法

一、问题背景 #

• 寻找Blazor WebAssembly (.NET 8)中无需在URL参数暴露数据的安全传递替代方案。
• 使用@InteractiveServerRenderMode开发Blazor Server .NET 8数据库迁移向导表单，需在组件间传递连接字符串这类敏感数据，要求不通过URL暴露、不依赖数据库，已尝试过URL参数方式。

二、推荐方案 #

方案1：Blazor Server 专用 - 会话状态容器（Scoped服务） #

Blazor Server的Scoped服务绑定单个用户会话，不会跨用户泄露数据，适合存储临时敏感信息。

实现步骤：

1. 创建状态服务类

// Services/DbMigrationState.cs
public class DbMigrationState
{
    public string? ConnectionString { get; set; }
    public string? DatabaseName { get; set; }
}

2. 注册Scoped服务
   在Program.cs中添加服务注册：

builder.Services.AddScoped<DbMigrationState>();

3. 在FromServer.razor中注入并存储数据

@page "/serverconn" 
@inject NavigationManager nav;
@inject DbMigrationState migrationState;

<!-- UI部分保留原有逻辑 -->
<MudButton 
    Variant="Variant.Filled" 
    Size="Size.Large" 
    Color="Color.Info"
    OnClick="GoToTableGrid"
    Disabled="!IsConnected">Continue</MudButton>

@code{
    private void GoToTableGrid()
    {
        // 将敏感数据存入状态服务
        migrationState.ConnectionString = ConnectionString;
        migrationState.DatabaseName = DatabaseName;
        nav.NavigateTo("/tablegrid");
    }

    protected void Return() 
    { 
        nav.NavigateTo("/"); 
    }

    // 保留你的现有变量：IsConnected、ConnectionString、DatabaseName等
}

4. 在DataTableGrid.razor中注入并读取数据

@page "/tablegrid"
@inject DbMigrationState migrationState;
@inject NavigationManager nav;

<!-- UI部分保持不变 -->

@code{
    protected async override Task OnInitializedAsync()
    {
        // 从状态服务获取数据，校验合法性
        if (!string.IsNullOrEmpty(migrationState.ConnectionString) && !string.IsNullOrEmpty(migrationState.DatabaseName))
        {
            await LoadDBTables(migrationState.DatabaseName, migrationState.ConnectionString);
        }
        else
        {
            // 无有效数据时跳转回配置页
            nav.NavigateTo("/serverconn");
        }
    }

    public async Task LoadDBTables(string DbName, string DbConn)
    {
        string Query = "SELECT * FROM sys.tables ORDER BY name;";
        // 替换数据库名称，使用传入的连接字符串
        var targetConn = DbConn.Replace("master", DbName);
        try
        {
            using (var dbContext = new SqlServerDBContext(targetConn))
            {
                var dataServices = new DataServicesTest(dbContext);
                ListOfTables = await dataServices.QueryDBWithEfCore(Query);
            }
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Error fetching data: {ex.Message}");
            // 可添加用户友好的错误提示，比如MudAlert组件
        } 
    }

    // 保留你的现有变量：ListOfTables、selectedItems等
}

方案2：Blazor WebAssembly 专用 - 加密本地存储 #

WASM运行在客户端，需将敏感数据加密后存储，使用.NET提供的IProtectedBrowserStorage实现安全存储。

实现步骤：

1. 创建加密存储服务

// Services/ProtectedStorageService.cs
public class ProtectedStorageService
{
    private readonly IProtectedBrowserStorage _protectedStorage;

    public ProtectedStorageService(IProtectedBrowserStorage protectedStorage)
    {
        _protectedStorage = protectedStorage;
    }

    // 存储加密数据
    public async Task SaveSensitiveDataAsync(string key, string value)
    {
        await _protectedStorage.SetAsync(key, value);
    }

    // 获取解密数据
    public async Task<string?> GetSensitiveDataAsync(string key)
    {
        var result = await _protectedStorage.GetAsync<string>(key);
        return result.Success ? result.Value : null;
    }

    // 删除数据，避免残留
    public async Task RemoveSensitiveDataAsync(string key)
    {
        await _protectedStorage.DeleteAsync(key);
    }
}

2. 注册服务
   在Program.cs中添加：

builder.Services.AddScoped<ProtectedStorageService>();

3. 在发送组件中存储数据

@page "/serverconn"
@inject NavigationManager nav;
@inject ProtectedStorageService storageService;

<MudButton OnClick="async () => await GoToTableGrid()">Continue</MudButton>

@code{
    private async Task GoToTableGrid()
    {
        await storageService.SaveSensitiveDataAsync("DbConnection", ConnectionString);
        await storageService.SaveSensitiveDataAsync("DbName", DatabaseName);
        nav.NavigateTo("/tablegrid");
    }
}

4. 在接收组件中读取并清理数据

@page "/tablegrid"
@inject ProtectedStorageService storageService;
@inject NavigationManager nav;

@code{
    protected async override Task OnInitializedAsync()
    {
        var dbConn = await storageService.GetSensitiveDataAsync("DbConnection");
        var dbName = await storageService.GetSensitiveDataAsync("DbName");
        
        if (!string.IsNullOrEmpty(dbConn) && !string.IsNullOrEmpty(dbName))
        {
            await LoadDBTables(dbName, dbConn);
            // 用完即删，减少敏感数据暴露风险
            await storageService.RemoveSensitiveDataAsync("DbConnection");
            await storageService.RemoveSensitiveDataAsync("DbName");
        }
        else
        {
            nav.NavigateTo("/serverconn");
        }
    }
}

方案3：通用场景 - 组件参数传递（适合非路由跳转） #

如果是通过嵌套组件、模态框等方式传递数据，直接使用组件参数绑定即可，无需路由跳转：

<!-- 在FromServer.razor中嵌套DataTableGrid -->
<DataTableGrid ConnectionString="@ConnectionString" DatabaseName="@DatabaseName" Visible="@ShowTableGrid" />

@code{
    private bool ShowTableGrid { get; set; }

    private void GoToTableGrid()
    {
        ShowTableGrid = true;
    }
}

<!-- DataTableGrid.razor接收参数 -->
@code{
    [Parameter]
    public string? ConnectionString { get; set; }

    [Parameter]
    public string? DatabaseName { get; set; }

    protected async override Task OnInitializedAsync()
    {
        if (!string.IsNullOrEmpty(ConnectionString) && !string.IsNullOrEmpty(DatabaseName))
        {
            await LoadDBTables(DatabaseName, ConnectionString);
        }
    }
}

三、注意事项 #

• Blazor Server的Scoped服务会随用户会话超时自动清理，无需手动处理，但要注意会话过期场景。
• WASM必须使用IProtectedBrowserStorage，禁止直接明文存储敏感数据到普通localStorage。
• 敏感数据使用完成后建议立即清理（如WASM读取后删除、Server重置状态服务属性）。

内容的提问来源于stack exchange，提问作者LucianoFCastillo