Skip to content

taiga-family/ng-dompurify

Folders and files

NameName
Last commit message
Last commit date
Dec 8, 2024
Oct 17, 2022
Nov 21, 2024
Aug 6, 2019
Dec 13, 2023
Sep 20, 2024
Nov 21, 2024
Apr 12, 2024
Sep 20, 2024
May 16, 2024
Aug 28, 2024
Jan 9, 2025
Jan 9, 2025
Oct 17, 2022
Jun 12, 2024

NgDompurify

npm bundle size npm version code style: @tinkoff/linters

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 @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.

import {NgDompurifyModule} from '@taiga-ui/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 '@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:

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.

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:

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:

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

Read more about this license here

Demo

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