DomSanitizer
You can switch to the latest version Angular 10.
DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.
For example, when binding a URL in an <a [href]="someValue">
hyperlink, someValue
will be sanitized so that an attacker cannot inject e.g. a javascript:
URL that would execute code on the website.
In specific situations, it might be necessary to disable sanitization, for example if the application genuinely needs to produce a javascript:
style link with a dynamic value in it. Users can bypass security by constructing a value with one of the bypassSecurityTrust...
methods, and then binding to that value from the template.
These situations should be very rare, and extraordinary care must be taken to avoid creating a Cross Site Scripting (XSS) security bug!
Example
export class MyComponent {
html: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
this.html = sanitizer.bypassSecurityTrustHtml('<h1>DomSanitizer</h1><script>ourSafeCode()</script>') ;
}
}
Methods
sanitize()
#
sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
bypassSecurityTrustHtml()
#
bypassSecurityTrustHtml(value: string): SafeHtml
bypassSecurityTrustStyle()
#
bypassSecurityTrustStyle(value: string): SafeStyle
bypassSecurityTrustScript()
#
bypassSecurityTrustScript(value: string): SafeScript
bypassSecurityTrustUrl()
#
bypassSecurityTrustUrl(value: string): SafeUrl
bypassSecurityTrustResourceUrl()
#
bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl