CODEWITHSUNDEEP
angularangular-dom-sanitizer
alan
alan

Reputation: 6933

DomSanitizer error "URL Segment: 'null'"

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.

Upvotes: 3

Views: 1544

Answers (1)

alan
alan

Reputation: 6933

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);
    }

Upvotes: 7

Related Questions