How to show html string in angular template ?

Angular built-in supports vulnerabilities and attacks in a web application like cross site scripting, however sometimes in our application we want to render the html string through bypassing the security of angular.

To bypass the security, angular itself provides some methods and directives by which we can render or show html string in angular.

There is two ways to render the html string

innerHTML directive – Render only simple html tags and style tags, and remove style attributes and script tag
DomSanitizer – Render html with style tag and style tags but also remove scripts

Simple syntax for innerHTML

<div [innerHTML]="html"></div>

Simple syntax for DomSanitizer

 this.safehtmlStr=dom.bypassSecurityTrustHtml(this.html);

Example 1 : innerHTML to render the string

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'newapp';
  html:string="<p style='color:red'>String with color:red </p><a href='https://google.com'>google.com</a><script>alert('aa')</script>"
 
  constructor(){
     
  }
}

and html


<h2>Simple HTML only without style(Removed)</h2>
<div [innerHTML]="html"></div>

Example 2 : innerHTML to render the string

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'newapp';
  html:string="<style>a{ color:green}</style><p style='color:red'>String with color:red </p><a href='https://google.com'>google.com</a><script>alert('aa')</script>"
  safehtmlStr:SafeHtml;

  constructor( public dom:DomSanitizer){
      this.safehtmlStr=dom.bypassSecurityTrustHtml(this.html);
  }
}

and html

<h2> HTML With style</h2>

<div [innerHTML]="safehtmlStr"></div>

Output :

Screenshot 2022 03 31 at 11.14.21 PM — show html string in angular

As you can see we have used here DomSanitizer and its method bypassSecurityTrustHtml to sanitize the html string but it removes the script tag and only keeps html and inline style.

Create a pipe for safe html for global use

we can also create a pipe for safe html so we can use it globally in our app as below

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

@Pipe({
  name: 'safehtml'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any): SafeHtml {
      return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

and in html


<h2>HTML with pipe</h2>
<div [innerHTML]="html | safehtml"></div>

Live Example:

Also Read : How to Insert script tag dynamically in angular ?

Create a pipe for safe html for global use

Related

Related Posts