Safe value must use [property]=binding after bypass security with DomSanitizer

1. Bind ‘src’ to the audio element (src/app.html):

<audio #player style="width: 100%" controls="controls" [src]="srcValue">

1. Pass the url by setting ‘srcValue’

export class App {
  @ViewChild('player')
  private playerRef: ElementRef;
  
  name:string;
  srcValue: string;
  
  constructor(private domSanitizer: DomSanitizer) {
    this.name = 'Angular2';
  }
  
  buttonClickHandler(){
    let URL = 'http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
    let audioPlayer: HTMLAudioElement = this.playerRef.nativeElement;
    this.srcValue = this.domSanitizer.bypassSecurityTrustResourceUrl(URL);
  }
}

1. Result: https://plnkr.co/edit/L2bnfa0su03SRC7bod6i?p=preview

Hi,

You’re hitting the SafeSomething.toString function: https://github.com/angular/angular/blob/master/modules/@angular/platform-browser/src/security/dom_sanitization_service.ts#L210

I took a look, and I think your repro mixes two patterns: the playerRef -> nativeElement you’re using gives you direct access to the DOM element, outside of Angular’s mechanisms. You’re passing the wrapped value returned by bypassSecurity, but you’re already outside of Angular with the direct DOM access, and you can assign directly your value (https://plnkr.co/edit/nf8ZcGGVVDrSpdpS7Nih?p=preview). That error you see is just the DOM function stringifying the safe type.

If you want to stay within Angular, you’d need the wrapped type to bind on the audio src attribute (like so: https://plnkr.co/edit/HjBH6wv7OfpkPJA71J6l?p=preview).

I guess you had the WARNING: sanitizing unsafe URL value blob:http://localhost:4200/... (see http://g.co/ng/security#xss) error earlier when trying to bind the value?