Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Tinkoff/ng-dompurify
Inclusive Angular API for DOMPurify
https://github.com/Tinkoff/ng-dompurify
dompurify domsanitizer hacktoberfest html sanitizer svg xss
Last synced: 19 days ago
JSON representation
Inclusive Angular API for DOMPurify
- Host: GitHub
- URL: https://github.com/Tinkoff/ng-dompurify
- Owner: Tinkoff
- License: apache-2.0
- Archived: true
- Created: 2019-08-02T06:44:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-26T03:27:39.000Z (over 1 year ago)
- Last Synced: 2024-04-12T00:08:46.241Z (7 months ago)
- Topics: dompurify, domsanitizer, hacktoberfest, html, sanitizer, svg, xss
- Language: TypeScript
- Homepage: https://stackblitz.com/github/TinkoffCreditSystems/ng-dompurify/tree/master/projects/demo
- Size: 3.47 MB
- Stars: 85
- Watchers: 10
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# NgDompurify
[](https://bundlephobia.com/result?p=@tinkoff/ng-dompurify)
[](https://coveralls.io/github/TinkoffCreditSystems/ng-dompurify?branch=master)
[](https://npmjs.com/package/@tinkoff/ng-dompurify)
[](https://github.com/TinkoffCreditSystems/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 @tinkoff/ng-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 '@tinkoff/ng-dompurify';
@NgModule({
imports: [NgDompurifyModule],
})
export class MyModule {}
```
As a pipe:
```html
```
As a service:
```typescript
import {SecurityContext} from '@angular/core';
import {NgDompurifySanitizer} from '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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 '@tinkoff/ng-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
**@tinkoff/ng-dompurify** is a part of [Taiga UI](https://github.com/Tinkoff/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 **@tinkoff/ng-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/TinkoffCreditSystems/ng-dompurify/tree/master/projects/demo