How To Display Dynamic HTML Without Sanitizing Or Filtering Using Pipe

Posted By : Shilpa Adlakha | 28-May-2018

To display dynamic HTML in angular 5 we use the pipe to sanitize data. As Angular 2+ will remove all the attributes from the HTML tags.for this we need to create a Pipe and use it whenever we need the HTML to be as it is. When the value is inserted into the document object model from a template with the help of any of the property,attributes,styles, class binding or any interpolation. Angular sanitizes and escapes untrusted values. Sanitization process modifies the input field, returns it to a value that would be safe to insert into the document object model.

 

Step 1: To create a pipe we Create new file to hold the pipe pipes/sanitize-html.pipe.ts:

 

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

@Pipe({ name: 'sainitizeHtml', pure: false })
export class sanitizeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

 

Step 2: Now Add an import statement in your app.module.ts and add this it in declaration array.

 

import { sanitizeHtmlPipe } from './pipes/sanitize-html.pipe';

@NgModule({
  declarations: [
    sanitizeHtmlPipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

 

Step 3:Now we can use the pipe in our template:

 

<div [innerHTML]="post.body | SafeHtml"></div>

 

Following above steps we create pipe to show dynamic html as it is.

 

DOM sainitizer helps in allowing values to be safe

 

abstract class DomSanitizer implements Sanitizer {
  abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
  abstract bypassSecurityTrustHtml(value: string): SafeHtml
  abstract bypassSecurityTrustStyle(value: string): SafeStyle
  abstract bypassSecurityTrustScript(value: string): SafeScript
  abstract bypassSecurityTrustUrl(value: string): SafeUrl
  abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl
}

 


Methods used above are:

 

sanitize() :It sanitizes a value for use in the given SecurityContext.
abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null

If the given value is trustfull then it will render the data directly to be used in DOM.

abstract bypassSecurityTrustHtml(value: string): SafeHtml

 

SafeHtml,SafeStyle,SafeScript and SafeUrl:

All the above shows a warning in which is written as that the method with untrusted user data exposes the application to security issues.

 

bypassSecurityTrustStyle() :
It bypasses the security and trust of the given value to be safe style value.

 

bypassSecurityTrustScript() :
It bypasses the security and trusts the given value to be safe JavaScript.

 

bypassSecurityTrustUrl() :

It bypasses the security and trusts the given value to be a safe resource URL

 

 

Thanks

 

 

 

About Author

Author Image
Shilpa Adlakha

Shilpa is a bright Wordpress Developer, she has good knowledge of HTML, CSS, PHP and Wordpress.

Request for Proposal

Name is required

Comment is required

Sending message..