Trusting safe content
To let Angular know that the content being bound is safe, we use DomSanitizer and call the appropriate method based on the security contexts just described. The available functions are as follows:
- bypassSecurityTrustHtml
- bypassSecurityTrustScript
- bypassSecurityTrustStyle
- bypassSecurityTrustUrl
- bypassSecurityTrustResourceUrl
In our video player implementation, we use bypassSecurityTrustResourceUrl; it converts the video URL into a trusted SafeResourceUrl object:
this.videos.map(v => this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeUrlPrefix + v))
The map method transforms the videos array into a collection of SafeResourceUrl objects and assigns it to safeVideoUrls.
Each of the methods listed previously takes a string parameter. This is the content we want Angular to know is safe. The return object, which could be any of SafeStyle, SafeHtml, SafeScript, SafeUrl, or SafeResourceUrl, can then be bound to the view.
The last question to answer is why do this in the OnChanges Angular life cycle event?