Angular Error: unsafe value used in a resource URL context

ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

 

You can use the below steps to resolve the above error from Angular all versions (2, 4, 5, 6, 7, 8, 9, 10, 11, 12).

Step1: Create a safe pipe using the below command:

ng g pipe safe

OR

ng g pipe safe --module=app

 

Step 2: Add Safe pipe in app.module.ts

declarations: [SafePipe]

 

Step 3: Import Dom Sanitizer and Safe Pipe to access URL safely:

import { DomSanitizer } from "@angular/platform-browser";

 

Example,

import { Pipe, PipeTransform } from '@angular/core';

import { DomSanitizer } from "@angular/platform-browser"; 

@Pipe({

  name: 'safe'

})

export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url) {

    return this.sanitizer.bypassSecurityTrustResourceUrl(url);

  }

}

 

Step 4: Use pipe in HTML dome

<iframe [src]="video.videoUrl | safe"></iframe>