Angular 5 - sanitizing HTML with pipe

As below example if you trying print {} in html angular treats it as expression and will give errors so you can got below options, We have 2 options for HTML sanitization,

1. Using Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer: DomSanitizer) { }

  transform(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }

}

In Component you can use it as {{variable | santizeHtml }}

2. Using Component, as an property binding like below, Declare html in .ts file

const allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > { } [ ] ! +';

and use it in template as,

<span [innerHTML]="allowedChars"></span>

Demo : https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sanitizeHtml'})
export class sanitizeHtmlPipe implements PipeTransform  {
    transform(value) {
        return value.split('< ').join('<');
    }
}

The correct solution should be following the Angular security guide:

[..] Avoid directly interacting with the DOM and instead use Angular templates where possible.

For cases where this is unavoidable, use the built-in Angular sanitization functions. Sanitize untrusted values with the DomSanitizer.sanitize method and the appropriate SecurityContext. That function also accepts values that were marked as trusted using the bypassSecurityTrust … functions, and does not sanitize them, as described below.

So DomSanitizer explicitly has a sanitize method intended for this, so you should - in case of doubt - just use this.

E.g. in a pipe like this:

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeValue } from '@angular/platform-browser';

@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private _sanitizer: DomSanitizer) {}

  transform(untrustedHtml: string): SafeValue {
    return this._sanitizer.sanitize(SecurityContext.HTML, untrustedHtml);
  }
}

(Stackblitz example)

Of course, remember that this example here is only to be used and only secure with HTML. For CSS sanitisation or so you'd need a different pipe (i.e. just change the SecurityContext).

• All is good but your HTML is not perfect. so you need to remove space from html tags.
• Your JSON something should be like this

JSON:

      specialist: any = {
        "blocks": [
          {
            "paragraph": {
              "html": '<div id="test" class="test">\n<h3>NAME SPECIALIST</h3>\n<p>random text</p> <div>\n</div>'
            }
          }
        ]
      }
      package: any = {
        "fields": {
          "remarks": 'Arrangement: 3 nachten incl. ontbijt en 2 greenfees p.p. met keuze uit North en South<br>\n- gratis dagelijkse toegang tot de spa (1 uur Hamman, sauna, zwembad, hydromassage)',
          "name": 'Shortbreak 3 nachten<br>2 pers./Superior Double/LO, incl. golf'
        }
      }

HTML:

    <span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
    <p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
    <li [innerHTML]="package.fields.name | sanitizeHtml"></li>

Sanitize Pipe TS:

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
    
    @Pipe({ name: 'sanitizeHtml' })
    export class SanitizeHtmlPipe implements PipeTransform {
    
        constructor(private _sanitizer: DomSanitizer) { }
    
        transform(v: any): any {
            return this._sanitizer.bypassSecurityTrustHtml(v);
        }
    }

Output:

Browser Output Log View

For full HTML Sanitizing import setup process see this post