Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taiga-family/ng-dompurify
https://github.com/taiga-family/ng-dompurify
angular
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/taiga-family/ng-dompurify
- Owner: taiga-family
- License: apache-2.0
- Created: 2023-08-10T07:40:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-29T08:34:48.000Z (about 2 months ago)
- Last Synced: 2024-10-29T09:52:55.603Z (about 1 month ago)
- Topics: angular
- Language: TypeScript
- Size: 10.2 MB
- Stars: 8
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- trackawesomelist - ng-dompurify (⭐9) - This library implements [DOMPurify (⭐14k)](https://github.com/cure53/DOMPurify) as Angular Sanitizer or Pipe. It delegates sanitizing to DOMPurify and supports the same configuration. (Recently Updated / [Nov 22, 2024](/content/2024/11/22/README.md))
- fucking-awesome-angular - ng-dompurify - This library implements <b><code> 14197⭐</code></b> <b><code> 738🍴</code></b> [DOMPurify](https://github.com/cure53/DOMPurify)) as Angular Sanitizer or Pipe. It delegates sanitizing to DOMPurify and supports the same configuration. (Table of contents / Third Party Components)
- awesome-angular - ng-dompurify - This library implements [DOMPurify](https://github.com/cure53/DOMPurify) as Angular Sanitizer or Pipe. It delegates sanitizing to DOMPurify and supports the same configuration. (Table of contents / Third Party Components)
README
# NgDompurify
[](https://bundlephobia.com/result?p=@taiga-ui/dompurify)
[](https://npmjs.com/package/@taiga-ui/dompurify)
[](https://github.com/taiga-family/linters)
> This library implements `DOMPurify` as Angular `Sanitizer` or `Pipe`. It delegates sanitizing to `DOMPurify` and
> supports the same configuration. See [DOMPurify](https://github.com/cure53/DOMPurify).
Read more about Sanitization in Angular and how ng-dompurify works in
[this article](https://medium.com/angular-in-depth/warning-sanitizing-html-stripped-some-content-and-how-to-deal-with-it-properly-10ff77012d5a).
## Install
```
npm install @taiga-ui/dompurify
```
If you do not have `dompurify` in your package, install also:
```
npm install dompurify
npm install --save-dev @types/dompurify
```
## How to use
Either use pipe to sanitize your content when binding to `[innerHTML]` or use `NgDompurifySanitizer` service manually.
```typescript
import {NgDompurifyModule} from '@taiga-ui/dompurify';
@NgModule({
imports: [NgDompurifyModule],
})
export class MyModule {}
```
As a pipe:
```html
```
As a service:
```typescript
import {SecurityContext} from '@angular/core';
import {NgDompurifySanitizer} from '@taiga-ui/dompurify';
@Component({})
export class MyComponent {
constructor(private readonly dompurifySanitizer: NgDompurifySanitizer) {}
purify(value: string): string {
return this.dompurifySanitizer.sanitize(SecurityContext.HTML, value);
}
}
```
You can also substitute Angular `Sanitizer` with `DOMPurify` so it is automatically used all the time:
```typescript
import {NgModule, Sanitizer} from '@angular/core';
import {NgDompurifySanitizer} from '@taiga-ui/dompurify';
// ...
@NgModule({
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifySanitizer,
},
],
// ...
})
export class AppModule {}
```
## Configuring
Config for `NgDompurifySanitizer` or `NgDompurifyDomSanitizer` can be provided using token `DOMPURIFY_CONFIG`.
`NgDompurifyPipe` supports passing DOMPurify config as an argument to override config from DI.
```typescript
import {NgModule, Sanitizer} from '@angular/core';
import {NgDompurifySanitizer, DOMPURIFY_CONFIG} from '@taiga-ui/dompurify';
// ...
@NgModule({
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifySanitizer,
},
{
provide: DOMPURIFY_CONFIG,
useValue: {FORBID_ATTR: ['id']},
},
],
// ...
})
export class AppModule {}
```
## CSS sanitization
DOMPurify does not support sanitizing CSS. Angular starting version 10 dropped CSS sanitation as something that presents
no threat in supported browsers. You can still provide a handler to sanitize CSS rules values upon binding if you want
to:
```typescript
import {NgModule, Sanitizer} from '@angular/core';
import {NgDompurifySanitizer, SANITIZE_STYLE} from '@taiga-ui/dompurify';
@NgModule({
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifySanitizer,
},
{
provide: SANITIZE_STYLE,
useValue: yourImplementation, // <---
},
],
// ...
})
export class AppModule {}
```
## Hooks
DOMPurify supports various hooks. You can provide them using `DOMPURIFY_HOOKS` token:
```typescript
import {NgModule, Sanitizer} from '@angular/core';
import {NgDompurifySanitizer, DOMPURIFY_HOOKS, SANITIZE_STYLE} from '@taiga-ui/dompurify';
@NgModule({
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifySanitizer,
},
{
provide: SANITIZE_STYLE,
useValue: yourImplementation,
},
{
provide: DOMPURIFY_HOOKS,
useValue: [
{
name: 'beforeSanitizeAttributes',
hook: (node: Element) => {
node.removeAttribute('id');
},
},
],
},
],
// ...
})
export class AppModule {}
```
## Maintained
**@taiga-ui/dompurify** is a part of [Taiga UI](https://github.com/taiga-family/taiga-ui) libraries family which is
backed and used by a large enterprise. This means you can rely on timely support and continuous development.
## License
🆓 Feel free to use our library in your commercial and private applications
All **@taiga-ui/dompurify** packages are covered by [Apache 2.0](/LICENSE)
Read more about this license [here](https://choosealicense.com/licenses/apache-2.0/)
## Demo
You can see live demo here: https://stackblitz.com/github/taiga-family/ng-dompurify/tree/master/projects/demo