NgDompurify

This library implements DOMPurify as Angular Sanitizer or Pipe. It delegates sanitizing to DOMPurify and supports the same configuration. See DOMPurify.

Read more about Sanitization in Angular and how ng-dompurify works in this article.

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.

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 Angular Sanitizer with DOMPurify so it is automatically used all the time:

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.

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:

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:

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 {}

Demo

You can see live demo here: https://stackblitz.com/github/TinkoffCreditSystems/ng-dompurify/tree/master/projects/demo

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

4.0.0 (2022-10-17)

3.0.0 (2020-08-24)

Bug Fixes

• ssr: fix type error in SSR environment (#41) (14299c5)

Features

• sanitizer: Remove DOM implementation as unnecessary and update docs accordingly, remove CSS sanitation by default (#56) (d50cbdd)

2.2.0 (2020-03-31)

Bug Fixes

• ssr: fix type error in SSR environment (#41) (14299c5)

Features

• pipe: config is now optional (888ef8b)

2.1.0 (2020-03-11)

Bug Fixes

• service: implements now Angular Sanitizer insted of extending it to prevent problems in Ivy projects (2e7f7a7)

2.0.1 (2020-02-26)

Bug Fixes

• SVG: fix SVG style vulnerability (#36) (87edb38)

2.0.0 (2019-11-05)

Features

• ssr: support server side environment and update to DOMPurify 2+ (#30) (65ea43d)

1.1.4 (2019-09-09)

Features

• package-json: update peer dependencies

1.1.3 (2019-09-02)

Bug Fixes

• dependencies: set dependencies to be backwards compatible with Angular 6-7 (906b61d)

1.1.2 (2019-09-02)

Bug Fixes

• dependencies: make compatible with Angular 7 (7b3963a)

1.1.1 (2019-09-02)

Bug Fixes

• types: preserve ReadonlyArray in compiled code to support older TypeScript versions (387e87b)

1.1.0 (2019-08-30)

Features

• css: support sanitizing CSS through provided handler (be0d3a6)
• NgDompurifySanitizer: make service a single point of entrance to be able to attach hooks to DOMPurify in its constructor later (78ccfe9)

1.0.0 (2019-08-02)

Initial release of NgDompurify. This library implements DOMPurify as Angular entire DomSanitizer and as standalone Sanitizer or Pipe. It delegates sanitizing to DOMPurify and supports the same configuration.

Features

• NgDompurifyPipe: add pipe (916df6c)
• NgDompurifyDomSanitizer: add DOM sanitizer service (916df6c)
• NgDompurifySanitizer: add sanitizer service (916df6c)