Angular bypassSecurityTrustResourceUrl not working as expected

Question

I'm having a problem where DomSanitizer.bypassSecurityTrustResourceUrl is not working as expected.

I have created the following pipe as found in many sources online:

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

@Pipe({ name: 'safepipe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(url: string): SafeResourceUrl {
    var safeResource = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    return safeResource;
  }
} 

This should create a SafeResourceUrl which has a property 'changingThisBreaksApplicationSecurity' which holds a string. However in my case that property contains an object with an url property which holds the string.

Expected result: {"changingThisBreaksApplicationSecurity": "whatever the value of url is"}

My result: {"changingThisBreaksApplicationSecurity": { "url": "whatever the value of url is" }}

Because of this it doesn't work when setting it as the src of an iframe, so as a workaround I'm currently overwriting the value

safeResource["changingThisBreaksApplicationSecurity"] = safeResource["changingThisBreaksApplicationSecurity"].url;

which obviously isn't a nice solution so I was hoping that someone else knows how to properly fix this.

Answer 1

It sounds like you just want the resourceUrl which you could get by calling:

URL.createObjectURL(objectToCreateUrlFor);

This would give you the URL of the object. If you want to display the content in the UI, that's when you would use your safepipe to resolve a property to bind to in the UI. Note: The property you bind to needs to be of a SafeUrl type

// .ts file
public safePipedContent: SafeUrl;

// use your pipe to set the value of safePipedContent

// use property binding to display your content
<iframe [src]="safePipedContent"></iframe>