Skip to content

Instantly share code, notes, and snippets.

@CoskunCakir
Last active July 7, 2020 17:36
Show Gist options
  • Save CoskunCakir/83c56b018a7368460c420f6bcbd482dc to your computer and use it in GitHub Desktop.
Save CoskunCakir/83c56b018a7368460c420f6bcbd482dc to your computer and use it in GitHub Desktop.
If you are receiving an error like this when you want to show your file on the screen. "Error: unsafe value used in a resource URL context" then you need to sanitize your resource url. here is a pipe that you can use for this purpose.
import { Pipe, PipeTransform } from '@angular/core';
import {
DomSanitizer,
SafeHtml,
SafeStyle,
SafeScript,
SafeUrl,
SafeResourceUrl
} from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(
value: any,
type: string
): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html':
return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style':
return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script':
return this.sanitizer.bypassSecurityTrustScript(value);
case 'url':
return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl':
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default:
throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
<iframe [src]="document.file_url | safe: 'resourceUrl'"></iframe>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment