Angular Sanitize and How to sanitizing HTML with pipe

How to sanitizing HTML with pipe

Introduction:

We can easily sanitize your HTML in angular. we should develop custom pipe.ts for sanitize HTML so we can use any places from project using pipe operator.
Let’s play with it!

DomSanitizer, a service of Angular helps to prevent attackers from injecting malicious client-side scripts into web pages, which is often referred to as Cross-site Scripting or XSS.

Setup:

We are going to keep it simple with the following module and routing configuration. Let’s start the import process with pipe.ts built in.
On my setup I have created shared.module.ts. Any common files (like sanitized-html.pipe.ts) that I want to use globally in my project are added to the shared.module.ts.

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SanitizedHtmlPipe } from './sanitized-html.pipe';
@NgModule({
  declarations: [
    SanitizedHtmlPipe
  ],
  imports: [
    CommonModule
  ],
  exports: [
    SanitizedHtmlPipe
  ]
})
export class SharedModule { }
// hero.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from 'src/app/shared/shared.module';
import { HeroComponent } from './hero.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [HeroComponent],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild([
      {path: '', component: HeroComponent}
    ])
  ]
})
export class HeroModule { }
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'hero',
    loadChildren: () => import('./page/hero/hero.module').then(m => m.HeroModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
// sanitized-html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
  name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: any): any {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}
// hero.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
    jsonArticles: any = {
        "articles": [
            {
                "id": 1,
                "title": "<h1><a href='https://kmgtech.blogspot.com/'>Welcome to KK Nebula World!</ a > </h1>"
            },
            {
                "id": 2,
                "title": "<h2><a    href = 'https://kmgtech.blogspot.com/2021/10/how-to-get-route-url-in-angular.html' >        How to get route URL in Angular ? </a></h1 > "
            },
            {
                "id": 3,
                "title": "<h2><a    href = 'https://kmgtech.blogspot.com/2021/10/angular-html-binding.html' >        How to bind HTML into Angular ? </a></h1 > "
            }
        ]
    };
    constructor() { }
    ngOnInit(): void {
    }
}
// hero.component.html
<table>
  <tr *ngFor="let data of jsonArticles?.articles">
    <td>{{data?.id}}</td>
    <td>
      <div [innerHTML]="data?.title | sanitizedHtml"></div>
    </td>
  </tr>
</table>

Angular HTML binding

Directory Structure:

├── page
│ ├── hero
│ │ ├── hero.component.html
│ │ ├── hero.component.css
│ │ ├── hero.component.ts
│ ├── header
│ │ ├── …
│ └── footer
│ ├── …
├── shared
│ ├── sanitized-html.pipe.ts
│ └── shared.module.ts
└── app.module.ts