手动清理字符串

Question

我有一个textarea用户将键入一些文本的位置.文本不能是JavaScript或HTML等.我想手动清理数据并将其保存为字符串.

我无法弄清楚如何使用DomSanitizationService手动清理我的数据.

如果我{{ textare_text }}在页面上,那么数据被正确清理.

如何手动完成我的操作string？

Answer 1

您可以按如下方式清理HTML:

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);
  }

}

在这里演示plunker.

根据您的评论,您实际上想要逃避而不是消毒.

为此,请检查这个plunker,我们在那里进行逃逸和消毒.

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;");
  }
}

上面使用的HTML转义函数转义了与角度代码相同的字符(不幸的是,它们的转义函数不公开,所以我们不能使用它).

Answer 2

在Angular final中你可以像这样使用:

1. 首先从角度平台浏览器导入"DomSanitizer":

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

2. 然后在构造函数中:

   constructor(private _sanitizer: DomSanitizer){}
   

3. 然后在你的班级使用,如:

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