Manually sanitize a string
You can sanitize the HTML as follows:
import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `
<div [innerHTML]="_htmlProperty"></div>
`
})
export class AppComponent {
_htmlProperty: string = 'AAA<input type="text" name="name">BBB';
constructor(private _sanitizer: DomSanitizer){ }
public get htmlProperty() : SafeHtml {
return this._sanitizer.sanitize(SecurityContext.HTML, this._htmlProperty);
}
}
Demo plunker here.
From your comments, you actually want escaping not sanitization.
For this, check this plunker, where we have both escaping and sanitization.
import { Component, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `Original, using interpolation (double curly braces):<b>
<div>{{ _originalHtmlProperty }}</div>
</b><hr>Sanitized, used as innerHTML:<b>
<div [innerHTML]="sanitizedHtmlProperty"></div>
</b><hr>Escaped, used as innerHTML:<b>
<div [innerHTML]="escapedHtmlProperty"></div>
</b><hr>Escaped AND sanitized used as innerHTML:<b>
<div [innerHTML]="escapedAndSanitizedHtmlProperty"></div>
</b>`
})
export class AppComponent {
_originalHtmlProperty: string = 'AAA<input type="text" name="name">BBB';
constructor(private _sanitizer: DomSanitizer){ }
public get sanitizedHtmlProperty() : SafeHtml {
return this._sanitizer.sanitize(SecurityContext.HTML, this._originalHtmlProperty);
}
public get escapedHtmlProperty() : string {
return this.escapeHtml(this._originalHtmlProperty);
}
public get escapedAndSanitizedHtmlProperty() : string {
return this._sanitizer.sanitize(SecurityContext.HTML, this.escapeHtml(this._originalHtmlProperty));
}
escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">")
.replace(/"/g, """).replace(/'/g, "'");
}
}
The HTML escaping function used above escapes the same chars as angular code does (unfortunately, their escaping function is not public, so we can't use it).
In Angular final you can use like this:
First import "DomSanitizer" from angular platform-browser:
import { DomSanitizer } from '@angular/platform-browser'; import { SecurityContext } from '@angular/core';
Then in constructor :
constructor(private _sanitizer: DomSanitizer){}
Then use in your class like :
var title = "<script> alert('Hello')</script>" title = this._sanitizer.sanitize(SecurityContext.HTML, title);