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>