Angular Error: unsafe value used in a resource URL context

ERROR Error: unsafe value used in a resource URL context (see


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


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";



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

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


  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 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 -
My Books - Book 1 and Book 2 Powered by Blogger.