Blazor WASM按钮权限漏洞：普通用户可绕过前端禁用限制

按钮禁用的作用是什么？ #

按钮的disabled属性只是前端UI层面的交互限制，核心作用包括：

• 给普通用户明确的视觉提示，告知该功能无权限使用
• 避免用户误触无权限操作，减少无效的前端请求
• 优化用户体验，不用等后端返回权限错误再做反馈
  它从来都不是安全层面的权限控制手段。

如何解决该问题？ #

必须通过前端加固+后端核心验证的双重方式解决，核心依赖后端校验：

1. 前端逻辑优化 #

• 直接根据角色渲染/隐藏按钮：在Blazor中用角色判断包裹按钮代码，普通用户根本看不到操作入口：

@if (User.IsInRole("Admin"))
{
    <button class="btn btn-primary" @onclick="SaveUserInfo">保存</button>
}

• 若需保留按钮展示，在点击事件中先做权限校验：

private async Task SaveUserInfo()
{
    if (!User.IsInRole("Admin"))
    {
        await JSRuntime.InvokeVoidAsync("alert", "您无操作权限");
        return;
    }
    // 执行保存逻辑
}

2. 后端核心验证（必须实现） #

前端任何限制都能被绕过，所以必须在后端做权限拦截：

• 在API接口上添加角色授权：

[Authorize(Roles = "Admin")]
[HttpPost("SaveUser")]
public async Task<IActionResult> SaveUser(UserInfo user)
{
    await _userService.SaveUser(user);
    return Ok();
}

• 也可以在业务逻辑层中添加权限判断，确保只有管理员角色能执行保存操作。

这是默认行为吗？ #

是的，这是HTML和浏览器的默认设计。浏览器开发者工具提供了修改页面DOM元素的能力，包括移除disabled属性、修改事件绑定等，这是正常的调试功能，不属于Bug。

懂HTML调试的用户是否都能绕过该限制？ #

是的，只要会使用浏览器开发者工具（比如Chrome的Elements面板），就能轻松修改DOM属性绕过前端的disabled限制。前端UI层面的权限控制只能作为体验优化手段，不能作为安全校验的依赖。

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