The Angular treats all values as untrusted by
default. This is the great advantages of Angular.
Example 1 -
import
{BrowserModule, DomSanitizer}
from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `<div
[innerHtml]="html"></div>`,
})
export
class App
{
constructor(private
sanitizer: DomSanitizer) {
this.html
= sanitizer.bypassSecurityTrustHtml('<h1>DomSanitizer</h1><script>alert("XSS")</script>')
;
}
}
Example 2 -
import
{BrowserModule, DomSanitizer}
from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `<iframe
[src]="iframe"></iframe>`,
})
export
class App
{
constructor(private
sanitizer: DomSanitizer) {
this.iframe
= sanitizer.bypassSecurityTrustResourceUrl("https://www.code-sample.com")
}
}
I hope you are enjoying with this post! Please share with you friends. Thank you so much!