Angular Error: unsafe value used in a resource URL context
Ok, when you get this error you are probably trying to use url variable in you template. The most elegant way to fix this is use pipe to bypass security. In this example we will pass url variable into iframe src.
First of all we will create our pipe. We are injecting the DomSanitizer service, SecurityContext and executing the sanitize and bypassSecurityTrustResourceUrl method to sanitize and bypass security to trust the given value to be a safe style URL.
Note: calling these methods with untrusted USER DATA exposes your application to XSS security risks!
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); | |
} | |
} |
Now add you pipe to app.module:
@NgModule({ | |
imports: [ BrowserModule ], | |
declarations: [ App, SafePipe ], | |
bootstrap: [ App ] | |
}) |
Then just use it!
<iframe [src]="url | safe"></iframe> |
You can create pipes or implement logic for other contexts:
SecurityContext.NONE SecurityContext.HTML SecurityContext.STYLE SecurityContext.SCRIPT SecurityContext.URL SecurityContext.RESOURCE_URL
And that’s all.