Angular 5 - sanitizing HTML with pipe

Question

When i got the warning:

"WARNING: sanitizing HTML stripped some content"

I did some research and saw people using the pipe below or a pipe that looks like the one below

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: string): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

Unfortunately I still get the same error even when i implement the pipe like this:

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

So I'm wondering if I implemented the pipe wrong or is there something else why it doesn't work?

Edit:

example of specialist.blocks[0].paragraph.html:

"< div id="test" class="test"> \n< h3>NAME SPECIALIST< /h3>\n< p>random text< /p>< /div>\n< /div>"

example of package.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)"

example of package.fields.name:

"Shortbreak 3 nachten< br>2 pers./Superior Double/LO, incl. golf"

Getting the warnings in firefox and chrome

Amine

what is the value of package.fields.remarks ? can you share in this question – Grammar

added value examples – Amine

i have updated my answer can you check this ?. the problem is in the open html tag with space so i just removed the space using pipe it will be working for me – Grammar

should have probably said that i put the spaces in there so i could show you what is in the value because it would use the tags in the question xD – Amine

check the stackblitz link following its working for me stackblitz.com/edit/… – Grammar

still get the warnings sadly – Amine

Here is a gist gist.github.com/MurhafSousli/3d2ddb777c8ce88e2400bd93f694cd3b – Teutonic

Answer 1

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>

Currycomb

Where is allowedChars even used?Also this is no proper xss-safe sanitisation if you just use bypassSecurityTrustHtml` and is vulnerable to XSS attacks. – Via

Answer 2

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('<');
    }
}

Grammar

This is way too simple and can likely be bypassed. – Via

Answer 3

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

Via

Answer 4

• 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

Huba

This is explicitly unsafe (i.e. will result in an XSS), as it just passes untrusted HTML to the SanitizeHtmlPipe, which does actually just bypass the security checks via bypassSecurityTrustHtml. – Via