CASL React 库对授权安全吗？

Question

I came CASL JavaScript library, which restricts what resources a given client is allowed to access.

My question is whether it can be used for role based access in a React app in a secure way?

And whether user can temper with the permission and gain unauthorized access if used only in front end to display/hide components as shown in following react code?

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>
  );
}

Reference : https://casl.js.org/v5/en/package/casl-react

Answer 1

Tbh, users always can gain access from the frontend side by modifying some javascript code and that is why you must handle the authorization from the backend

about your question for CASL, it only checks if you have the ability to see this page or button or do specific actions ... so the place where you save user abilities is your responsibility, not CASL responsibility

Answer 2

Any code for the client (especially browsers) is publicly available to the user/guest and it can be easily tempered with. Any view/front-end library/framework is used to make user-interface dynamic has to be used only for making it dynamic, not for adding security measures or critical logic. Just like your client code can communicate with an API, any other client may also communicate with it as well (If not, the client code can easily be tempered).

CASL library for React is used only to make the UI dynamic, to be able to hide unnecessary functionality. It has zero effect on securing the application. Anyone who inspects the code can see the "hidden" UI and with changing a few variables, they can access any functionality. So no, CASL or similar libraries cannot make your application secure, it may even give you the false sense of security.

You should secure your application on the API level. Anything unnecessary should be hidden from the currently authenticated user or non-authenticated user (guests). As long as your API endpoints are secure, the fact of anyone can temper with the client code does not create any security risk (as long as security risks like XSS, CSRF are eliminated and the client code does not give much information about the intricacies of the critical logic at the API level).

Libraries like CASL should be only used to improve the user-interface, thus improving the user-experience. If not used, let's say the admin dashboard is visible to any user, but they wouldn't be able to see any data or do any action because the API endpoint won't allow them (authorization on the API level); that would create a confusion in user as they may think this functionality is necessary for them to use your application but somehow there is a problem, or it may signal that their account/data may not be safe as well.