DomSanitizer error "URL Segment: 'null'"

Question

Recently in our Angular 2 app, we added a video component via iframe to pull in external embedded videos. Additionally, we sanitize these resource URLs via a pipe which leveraged the DomSanitizer. The problem was we frequently, but not consistently, received the below error and the embedded video would not load:

URL Segment: 'null'

Sample sanitize pipe usage:

<iframe [src]="(videoObservable$ | async)?.resourceUrl | sanitizeResourceUrl"></iframe>

The pipe method itself:

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

Logging the value of the url parameter shows that the pipe is initially called with a parameter value of null and then again immediately after with value.

Answer 1

I found that the DomSanitizer does not deal with null values very well and so the below modification fixed the issue by checking for null and setting the input value to empty string prior to sanitation.

transform(url: string): SafeResourceUrl {
        if (!url) {
            url = '';
        }

        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }