I do not understand the concept of SafeUrl / SafeStyle

Question

Some time ago, I realized that I can’t just pass the string to the href parameter of the tag <img ...>or background style. Only copies of SafeUrland are accepted SafeStyle. Honestly, I don’t understand the whole concept, because I can sanitize any image URL or style using a simple call. It would be wise if I could create a safe pipeline to sort safe hrefs images from a reliable API backend directly to the View layer. Buf @angular/platform-browserAPIs cannot be injected into the service, so I have to deactivate the URLs in the controls where I lack the context that could help me distinguish the reliability of the source. Maybe I missed something?

Answer 1

Sanitizing means that you explicitly specify Angular to consider the content safe. This is nothing more than a token for Angular that you take responsibility for, and Angular does not need to check the contents of potentially dangerous content. Only "sanitize" the content where you know where it came from and that it cannot contain harmful content.

This is why you need to bind it using property binding notation [innerHTML]="sanitizedConentbecause when it innerHTML="{{sanitizedContent}}" sanitizedContentgets a string ( toString) and the marker is lost in the process.