This library implements
DOMPurify
as Angular entireDomSanitizer
and as standaloneSanitizer
orPipe
. It delegates sanitizing toDOMPurify
and supports the same configuration. See DOMPurify.
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
Either use pipe to sanitize your content when binding to [innerHTML]
or use NgDompurifySanitizer
service manually.
import {NgDompurifyModule} from '@tinkoff/ng-dompurify';
@NgModule({
imports: [NgDompurifyModule],
})
export class MyModule {}
As a pipe:
<div [innerHtml]="value | dompurify"></div>
As a service:
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 entire Angular DomSanitizer
with DOMPurify
:
import {DomSanitizer} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgDompurifyDomSanitizer} from '@tinkoff/ng-dompurify';
// ...
@NgModule({
// ...
providers: [
{
provide: DomSanitizer,
useClass: NgDompurifyDomSanitizer,
},
],
// ...
})
export class AppModule {}
NgDompurifyPipe
supports passing DOMPurify config as an argument.
Config for NgDompurifySanitizer
or NgDompurifyDomSanitizer
can be
provided using token DOMPURIFY_CONFIG
:
import {DomSanitizer} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgDompurifyDomSanitizer, DOMPURIFY_CONFIG} from '@tinkoff/ng-dompurify';
// ...
@NgModule({
// ...
providers: [
{
provide: DomSanitizer,
useClass: NgDompurifyDomSanitizer,
},
{
provide: DOMPURIFY_CONFIG,
useValue: {FORBID_ATTR: ['id']},
},
],
// ...
})
export class AppModule {}
DOMPurify does not support sanitizing CSS. DomSanitizer
in Angular
is organized in such a way that it only received CSS rule value, and
not the name. Therefore, a method taking in CSS rule value and returning
a sanitized value is required to support CSS. You can try using internal
Angular import ɵ_sanitizeStyle
since they use it themselves to use it in
platform-browser
package where DomSanitizer
is implemented. This way
level of CSS sanitization will be equal to native Angular with added benefit
of supporting inline styles in [innerHTML]
bindings.
import {DomSanitizer} from '@angular/platform-browser';
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {NgDompurifyDomSanitizer, SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: DomSanitizer,
useClass: NgDompurifyDomSanitizer,
},
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
DOMPurify supports various hooks. You can provide them using DOMPURIFY_HOOKS
token:
import {DomSanitizer} from '@angular/platform-browser';
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {
NgDompurifyDomSanitizer,
DOMPURIFY_HOOKS,
SANITIZE_STYLE,
} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: DomSanitizer,
useClass: NgDompurifyDomSanitizer,
},
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
{
provide: DOMPURIFY_HOOKS,
useValue: [
{
name: 'beforeSanitizeAttributes',
hook: (node: Element) => {
node.removeAttribute('id');
},
},
],
},
],
// ...
})
export class AppModule {}
You can see live demo here: https://stackblitz.com/github/TinkoffCreditSystems/ng-dompurify/tree/master/projects/demo