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>

 

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^