Blazor Server端如何加密DispatchBrowserEvent传输值或停止实时传输

根因说明：观测到的输入内容实时传输并非心跳机制导致，是Blazor Server默认@bind语法绑定oninput事件的特性，每一次用户输入都会触发DispatchBrowserEvent事件上报同步服务端状态。公网HTTPS部署下SignalR传输本身是加密的，若内部合规要求禁止敏感字段中途上报，可选择以下任一方案实现需求。

方案一：停止输入内容实时传输（优先推荐，实现成本低无额外性能开销） #

核心逻辑是修改输入框绑定的触发事件，仅在需要时才同步数据到服务端：

• 单字段修改绑定事件：将默认实时同步的oninput事件替换为失焦/回车才触发的onchange事件

<!-- 默认写法，每输入一个字符就同步到服务端 -->
<!-- <input @bind="SensitivePassword" /> -->

<!-- 修改后仅在输入框失焦、按下回车时才同步数据 -->
<input @bind:event="onchange" @bind="SensitivePassword" type="password" />

• 高敏感字段完全取消服务端绑定：密码等核心敏感字段不要做双向绑定，提交时通过JS直接取值传输

<input id="pwdInput" type="password" />
<button @onclick="HandleSubmit">提交数据</button>

@code {
    [Inject] private IJSRuntime JSRuntime { get; set; }

    private async Task HandleSubmit()
    {
        // 仅提交时才从前端取敏感字段值，全程无中途上报
        var password = await JSRuntime.InvokeAsync<string>("eval", "document.getElementById('pwdInput').value");
        // 后续提交逻辑
    }
}

• 全局配置默认绑定事件：如果项目存在大量敏感输入框，可全局修改默认绑定事件为onchange，无需逐个修改字段
  在Program.cs中添加如下配置：

builder.Services.AddRazorPages()
    .AddRazorOptions(options =>
    {
        options.HtmlHelperOptions.InputTextAreaDefaultEvent = "onchange";
    });

builder.Services.AddServerSideBlazor(options =>
{
    // 可选配置：禁用不必要的事件转发、缩短断线会话保留时间
    options.DetailedErrors = false;
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(1);
});

方案二：加密DispatchBrowserEvent传输内容 #

如果业务需要保留输入内容实时同步的特性，可对传输的事件 payload 做端到端加密：

1. 实现自定义CircuitHandler拦截服务端事件处理逻辑，完成会话密钥协商、传输内容加解密

public class EncryptedEventCircuitHandler : CircuitHandler
{
    private readonly IEncryptionService _encryptionService;

    public EncryptedEventCircuitHandler(IEncryptionService encryptionService)
    {
        _encryptionService = encryptionService;
    }

    public override Task OnCircuitOpenedAsync(Circuit circuit, CancellationToken cancellationToken)
    {
        // 会话建立阶段协商动态对称加密密钥，禁止硬编码密钥
        return base.OnCircuitOpenedAsync(circuit, cancellationToken);
    }

    // 可重写相关方法拦截DispatchBrowserEvent事件，对payload做解密处理
}

2. 在Program.cs中注册自定义处理器

builder.Services.AddScoped<CircuitHandler, EncryptedEventCircuitHandler>();

3. 前端自定义Blazor启动逻辑，对发送到服务端的事件数据做加密处理
   修改_Host.cshtml（或App.razor）中的Blazor启动配置：

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
Blazor.start({
    configureSignalR: function (builder) {
        builder.withUrl('/_blazor', {
            // 自定义SignalR消息处理器，对发送的DispatchBrowserEvent内容加密
        });
    }
});
</script>

注意：该方案需要自行实现对称加密逻辑，密钥需每次会话动态生成，性能开销高于方案一，非必要场景不推荐使用。

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