Is CASL React library safe for authorization?

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.

Answer 3

You have to set authorization both in the backend and frontend.

The backend system exists for an extra abstraction layer after all, it's like the security of the building. It lets you in and out of a certain area. While frontend is like the receptionist. The receptionist can go anywhere they like to a certain area, they have some responsibilities, they know where they are allowed to go and are not allowed to. But the one who truly knows where to and when places are allowed to be is still the security's of the building.

In small systems (or businesses for the sake of analogy), you can pretty much see the receptionist or the server go anywhere. But imagine a large enterprise building, they have an extra abstraction layer for security. Even the security have layers too. But that's as far as an analogy.

If you want to use casl in frontend, my recommendation is that you should too use casl in backend and use the packRules and unpackRules function in @casl/ability/extra to transfer the necessary rules to your frontend app.

If you set authorization in backend (not specific to Casl as well), no matter how the frontend will be broken down, the backend system will just reject unwanted actions. That is of course if you also create the rules right.