Manually sanitize a string

Question

I have an textarea where the user will type in some text. The text cannot be JavaScript or HTML etc. I want to manually sanitize the data and save it to a string.

I cannot figure out how to use DomSanitizationService to manually sanitize my data.

If I do {{ textare_text }} on the page then the data is correctly sanitized.

How do I do that manually to a string I have?

Answer 1

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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")                  .replace(/"/g, "&quot;").replace(/'/g, "&#039;");   } } 

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).

Answer 2

In Angular final you can use like this:

1. First import "DomSanitizer" from angular platform-browser:

   import { DomSanitizer } from '@angular/platform-browser'; import { SecurityContext } from '@angular/core'; 

2. Then in constructor :

   constructor(private _sanitizer: DomSanitizer){} 

3. Then use in your class like :

   var title = "<script> alert('Hello')</script>" title = this._sanitizer.sanitize(SecurityContext.HTML, title);