CASL React 库对授权安全吗？答案

【问题标题】：Is CASL React library safe for authorization?CASL React 库对授权安全吗？
【发布时间】：2022-07-19 07:09:36
【问题描述】：

我来到了 CASL JavaScript 库，它限制了给定客户端可以访问的资源。

我的问题是它是否可以以安全的方式用于 React 应用中基于角色的访问？

如果仅在前端用于显示/隐藏组件，用户是否可以修改权限并获得未经授权的访问，如下面的反应代码所示？

import React, { useContext } from 'react';
import { AbilityContext } from './Can'

export default () => {
  const createTodo = () => { /* logic to show new todo form */ };
  const ability = useContext(AbilityContext);

  return (
    <div>
      {ability.can('create', 'Todo') &&
        <button onClick={createTodo}>Create Todo</button>}
    </div>
  );
}

参考：https://casl.js.org/v5/en/package/casl-react

【问题讨论】：

标签： javascript reactjs casl

【解决方案1】：

Tbh，用户总是可以通过修改一些javascript代码从前端获得访问权限，这就是为什么你必须从后端处理授权

关于您对 CASL 的问题，它只检查您是否有能力查看此页面或按钮或执行特定操作......因此您保存用户能力的地方是您的责任，而不是 CASL 的责任

【讨论】：

【解决方案2】：

客户端（尤其是浏览器）的任何代码都对用户/访客公开可用，并且可以轻松修改。任何用于使用户界面动态化的视图/前端库/框架只能用于使其动态化，而不是用于添加安全措施或关键逻辑。就像您的客户端代码可以与 API 通信一样，任何其他客户端也可以与之通信（如果不能，客户端代码很容易被修改）。

用于 React 的 CASL 库仅用于使 UI 动态化，以便能够隐藏不必要的功能。它对保护应用程序的影响为零。检查代码的任何人都可以看到“隐藏”的 UI，并且通过更改一些变量，他们可以访问任何功能。所以不，CASL 或类似的库不能确保您的应用程序安全，它甚至可能会给您带来错误的安全感。

您应该在 API 级别保护您的应用程序。任何不必要的东西都应该对当前经过身份验证的用户或未经过身份验证的用户（客人）隐藏。只要您的 API 端点是安全的，任何人都可以修改客户端代码这一事实不会产生任何安全风险（只要消除了 XSS、CSRF 等安全风险并且客户端代码没有提供太多关于复杂性的信息） API 级别的关键逻辑）。

像 CASL 这样的库应该只用于改善用户界面，从而改善用户体验。如果不使用，假设任何用户都可以看到管理仪表板，但他们将无法看到任何数据或执行任何操作，因为 API 端点不允许他们（API 级别的授权）；这会给用户造成混淆，因为他们可能认为此功能对于他们使用您的应用程序是必要的，但不知何故存在问题，或者它可能表明他们的帐户/数据也可能不安全。

【讨论】：