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
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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shilpa Adlakha
Shilpa is a bright Wordpress Developer, she has good knowledge of HTML, CSS, PHP and Wordpress.