Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
@casl/angular
Advanced tools
Readme
This package allows to integrate @casl/ability
with Angular application. It provides AblePipe
and AblePurePipe
to Angular templates, so you can show or hide components, buttons, etc based on user ability to see them.
npm install @casl/angular @casl/ability
# or
yarn add @casl/angular @casl/ability
# or
pnpm add @casl/angular @casl/ability
To add pipes into your application's templates, you need to import AbilityModule
in your AppModule
and
import { NgModule } from '@angular/core';
import { AbilityModule } from '@casl/angular';
import { Ability, PureAbility } from '@casl/ability';
@NgModule({
imports: [
// other modules
AbilityModule
],
providers: [
{ provide: Ability, useValue: new Ability() },
{ provide: PureAbility, useExisting: Ability }
]
// other properties
})
export class AppModule {}
The 2nd provider provides instance of PureAbility
, so pipes can inject it later. This pipes inject PureAbility
(not Ability
) because this allows an application developer to decide how to configure actions, subjects and conditions. Also this is the only way to get maximum from tree shaking (e.g., if you don't need conditions you can use PureAbility
and shrink @casl/ability size).
Read CASL and TypeScript to get more details about
Ability
type configuration.
Majority of applications that need permission checking support have something like AuthService
or LoginService
or Session
service (name it as you wish) which is responsible for user login/logout functionality. Whenever user login (and logout), we need to update Ability
instance with new rules.
Let's imagine that server returns user with a role on login:
import { Ability, AbilityBuilder } from '@casl/ability';
import { Injectable } from '@angular/core';
@Injectable({ provideIn: 'root' })
export class Session {
private token: string
constructor(private ability: Ability) {}
login(details) {
const params = { method: 'POST', body: JSON.stringify(details) };
return fetch('path/to/api/login', params)
.then(response => response.json())
.then((session) => {
this.updateAbility(session.user);
this.token = session.token;
});
}
private updateAbility(user) {
const { can, rules } = new AbilityBuilder(Ability);
if (user.role === 'admin') {
can('manage', 'all');
} else {
can('read', 'all');
}
this.ability.update(rules);
}
logout() {
this.token = null;
this.ability.update([]);
}
}
See Define rules to get more information of how to define
Ability
Then use this Session
service in LoginComponent
:
import { Component } from '@angular/core';
import { Session } from '../services/Session';
@Component({
selector: 'login-form',
template: `
<form (ngSubmit)="login()">
<input type="email" [(ngModel)]="email" />
<input type="password" [(ngModel)]="password" />
<button type="submit">Login</button>
</form>
`
})
export class LoginForm {
email: string;
password: string;
constructor(private session: Session) {}
login() {
const { email, password } = this;
return this.session.login({ email, password });
}
}
AbilityService
is a service that provides ability$
observable. This observable injects provided in DI PureAbility
instance and emits it each time its rules are changed. This allows efficiently use permissions checks, especially in case we use ChangeDetectionStrategy.OnPush
.
Let's first see how it can be used in any component:
@Component({
selector: 'my-home',
template: `
<ng-container *ngIf="ability$ | async as ability">
<h1>Home Page</h1>
<button *ngIf="ability.can('create', 'Post')">Create Post</button>
</ng-container>
`
})
export class HomeComponent {
readonly ability$: Observable<AppAbility>;
constructor(abilityService: AbilityService<AppAbility>) {
this.ability$ = abilityService.ability$;
}
}
It also can be safely used inside *ngFor
and other directives. If we use ChangeDetectionStrategy.OnPush
, it will give us additional performance improvements because ability.can(...)
won't be called without a need.
This approach works good from performance point of view because it creates only single subscription per component (not per check as in case of ablePure
pipe) and doesn't require our component to use Default
or OnPush
strategy.
Note: provide this service at root injector level as we need only 1 instance of it.
But let's also see how we can do permission checks using pipes and what are performance implications of that:
To check permissions in any template you can use AblePipe
:
<div *ngIf="'create' | able: 'Post'">
<a (click)="createPost()">Add Post</a>
</div>
Directive cannot be used to pass values into inputs of other components. For example, we need to enable or disable a button based on user's ability to create a post. With directive we cannot do this but we can do this with pipe:
<button [disabled]="!('create' | able: 'Post')">Add Post</button>
There are 2 pipes in @casl/angular
:
able
- impure pipeablePure
- pure pipeSo, when should we use which?
If you are in doubt, then use
ablePure
for action and subject type checks, andable
for all others
According to Angular documentation pure pipes are called only if their arguments are changed. This means that you can't use mutable objects with pure pipes because changes in that objects don't trigger pure pipe re-evaluation. But a good thing is that Angular creates only single instance of a pure pipe for the whole app and reuses it across components, this way it safes component instantiation time and memory footprint.
Due to open feature in Angular, we need to pass the result of ablePure
pipe to async
pipe. So, instead of
<div *ngIf="'create' | ablePure: 'Todo'">...</div>
we need to write:
<div *ngIf="'create' | ablePure: 'Todo' | async">...</div>
ablePure
pipe returns anObservable<boolean>
, soasync
pipe can effectively unwrap it
For apps that mutate application state, we need to use impure able
pipe as it can detect changes in object properties. Don't worry, checks by action and subject type are very fast and are done in O(1) time. The performance of checks by action and subject object are a bit slower and depend on the amount of rules for a particular subject type and used conditions but usually this won't become a bottle neck for the app.
This package is written in TypeScript, so it will warn you about wrong usage.
It may be a bit tedious to use application specific abilities in Angular app because everywhere you inject Ability
instance you will need to import its generic parameters:
import { Ability } from '@casl/ability';
import { Component } from '@angular/core';
import { AppAbilities } from '../services/AppAbility';
@Component({
selector: 'todo-item'
})
export class TodoItem {
constructor(
private ability: Ability<AppAbilities>
) {}
}
To make the life easier, you can use AbilityClass<TAbility>
class to utilize Companion object pattern:
import { Ability, AbilityClass } from '@casl/ability';
type Actions = 'create' | 'read' | 'update' | 'delete';
type Subjects = 'Article' | 'User';
export type AppAbility = Ability<[Actions, Subjects]>;
export const AppAbility = Ability as AbilityClass<AppAbility>;
And use AppAbility
everywhere in your app:
import { NgModule } from '@angular/core';
import { AppAbility } from './services/AppAbility';
@NgModule({
// other configuration
providers: [
{ provide: AppAbility, useValue: new AppAbility() },
{ provide: PureAbility, useExisting: AppAbility },
]
})
export class AppModule {}
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on guidelines for contributing.
If you'd like to help us sustain our community and project, consider to become a financial contributor on Open Collective
See Support CASL for details
FAQs
Angular module for CASL which makes it easy to add permissions in any Angular app
The npm package @casl/angular receives a total of 4,212 weekly downloads. As such, @casl/angular popularity was classified as popular.
We found that @casl/angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.