How to solve sanitizing URL problem in Angular?

Updated on July 1, 2021     Kisan Patel

Lets learn how to solve sanitizing URL problem in Angular using pipes.

First create SafeUrl pipes by running below command using angular cli:

$ ng g p SafeUrl

safe-url.pipe.ts

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

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}
   transform(url) {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
}

Now, use it as the following:

<iframe [src]="url | safeUrl" frameborder="0" allowfullscreen></iframe>