Blazor wasm - 在哪里检查用户权限

Question

使用带有 asp.net 服务器的 Blazor Web-Assembly Web 应用程序，我想过滤用户可以看到/更改/使用的表单/输入。 IE。没有权限的匿名用户或登录用户可能无法查看或修改选择表单（组合框）。 该页面显示有关特定区域的信息（同一页面用于不同区域，但使用 url 中的输入来指定区域）。如果用户没有权限，则只应允许基本视图。如果用户来自该区域（区域声明值）并且具有“提升”角色，则会显示更高级的视图。如果我要检查的只是用户角色，例如“管理员”，它就可以正常工作：

<AuthorizeView Roles="Admin">
    <Authorized>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Secret choise:</span>
            </div>
            <select @bind="Choise">
                <option value=A>A</option>
                <option value=B>B</option>
            </select>
        </div>
    </Authorized>
</AuthorizeView>

但与变量值相比，角色和“区域”声明的组合似乎需要更多代码...... 使用razor.cs代码调用服务器：

private async Task CheckUserViewPriveligesViaServer()
{
    var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
    var user = authState.User;

    if (user.Identity.IsAuthenticated)
    {
        var claims = user.Claims;
        var userID = user.FindFirst(c => c.Type == "sub")?.Value;
        UserSiteDTO userSiteDTO = new UserArea() { AreaID = _area.ID, UserID = userID };
        try
        {
            var canUserViewSensitiveInformation = await UsersReposotory.IsUserElevatedAndFromArea(userSiteDTO); // calls asp.net server
            if (canUserViewSensitiveInformation)
            {
                _viewPriveliges = ViewPriveliges.AreaAdmin;
            }
            else
            {
                _viewPriveliges = ViewPriveliges.None;
            }
        }
        catch (Exception)
        {

            _viewPriveliges = ViewPriveliges.None;
            Console.WriteLine("Unable to get user priveliges");
        }
    }
    else
    {
        _viewPriveliges = ViewPriveliges.None;
    }
}

在服务器上：

[HttpPost("isUserElevatedAndFromArea")]
public async Task<ActionResult<bool>> IsUserElevatedAndFromArea(UserSiteDTO userDTO)
{
    if (string.IsNullOrWhiteSpace(userDTO.AreaID) 
        || string.IsNullOrWhiteSpace(userDTO.UserID))
    {
        return false;
    }
    var user = await _userManager.FindByIdAsync(userDTO.UserID);
    var claims = await _userManager.GetClaimsAsync(user);
    var areaOk = false;
    var adminOk = false;
    foreach (var c in claims)
    {
        if (c.Type == "AreaID")
        {
            if (!string.IsNullOrWhiteSpace(c.Value) && c.Value == userDTO.AreaID )
            {
                areaOk = true;
            }
        }
        if (c.Type == "AreaAdmin")
        {
            if (!string.IsNullOrWhiteSpace(c.Value) || c.Value == "Yes")
            {
                adminOk = true;
            }
        }
    }
    return areaOk && adminOk;
}

加上剃刀代码中的if语句：

@if (_viewPriveliges == ViewPriveliges.AreaAdmin)
{
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">Secret choise:</span>
        </div>
        <select @bind="Choise">
            <option value=A>A</option>
            <option value=B>B</option>
        </select>
    </div>
}

另一种选择是将服务器代码“烘焙”到 razor.cs 代码中以在 webassembly 中运行检查。

所以，我的问题是，在页面的代码（浏览器中的 web 程序集）中检查此信息是否“可以”安全，或者是否应该通过 http get/post 调用调用服务器来完成？ ?

Answer 1

不，它在浏览器中不安全。浏览器应该只看到客户端拥有的权限。此外，客户端的硬件确实是未知的，因此对数据进行排序和过滤的性能是值得怀疑的。

Answer 2

尝试使用这个内置组件 - 授权视图：

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You can only see this content if you're authenticated.</p>
    </Authorized>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
</AuthorizeView>

但正如@Brian Parker 所指出的，这只是为了方便。由于您在客户端，因此实际上没有安全性之类的东西，因为可以绕过所有安全措施。换句话说，您需要确保 API 中的安全措施到位，以免将不安全的数据传递给客户端。