DomSanitizer being applied to URL redirects it to localhost?

Question

When I pass a remote url through DomSanitizer, http://localhost:4200 is being prefixed to the url and I get a 404 as a consequence.

GET http://localhost:4200/.cs.uic.edu/~i101/SoundFiles/Fanfare60.wav 404 (Not Found)

The original URL: https://www2.cs.uic.edu/~i101/SoundFiles/Fanfare60.wav

My code:

  constructor(private sanitizer: DomSanitizer) {}

  public getSantizeUrl(url: string) {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

And my template:

  <audio #player style="width: 100%" controls="controls" [src]="getSantizeUrl(chunk.value)" >    
  </audio>

Is there something I'm missing? Why the prefix? FWIW bypassSecurityTrustUrl(url) has the same effect.

Thanks

Answer 1

Probably the redirect is forced from src by the response of getSantizeUrl. Try to save the url in a variable, below an example:

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

@Component({
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent
{
    public audioUrl: SafeResourceUrl;

    constructor(private sanitizer: DomSanitizer) {}

    getSantizeUrl(url: string) {
         this.audioUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }

}

And in the template:

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

Probably you should call the getSantizeUrl in the onInit if you already have the url to santize or from the event related the change of chunk.value

Answer 2

Thanks for the input guys, it appears that there as some user error on my part.

URLs were being corrupted before even reaching the sanitizer :/