I've had this issue with an Angular app where I tried the bypassSecurityTrustResourceUrl
available within DomSanitizer
however, it didn't work.
Following code within the template section was needed.
<iframe [src]="iframeLink | safeUrl" style="position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>
A pure pipe is employed here to sanatize URL input on the DOM.
Component should have the safeUrl
pipe as follows;
@Pipe({
name: "safeUrl",
pure: true
})
export class SafeUrlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url: string): SafeResourceUrl {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
Although this setup will allow a piece of URL to be sanatized and rendered in the DOM, you may still run into an issue on the hosting part of your URL.
For example, if you're trying to display a page from https://bit.ai but it's not displayed, try and alter your URL in the following manner:
https://acme.bit.ai/docs/**view**/4fkh34972kahf
changed to
https://acme.bit.ai/docs/**embed**/4fkh34972kahf