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

}

Demo plunker here

根据您的评论，您实际上希望转义而不是清理。

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

上面使用的HTML escaping function会转义与angular code does相同的字符（不幸的是，它们的转义函数不公开，因此我们无法使用它。）

Answer 2

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

首先导入＆＃34; DomSanitizer＆＃34;来自angular platform-browser：

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

然后在构造函数中：

constructor(private _sanitizer: DomSanitizer){}

然后在你的班级使用，如：

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

Answer 3

在 angular ^ 2.3.1

中

使用 bootstrap4进度条获取视图。请参阅示例中我们需要 style.width 的值。

<!-- View HTML-->
<div class="progress">
    <div class="progress-bar" role="progressbar" [style.width]="getProgress('style')" aria-valuenow="getProgress()" aria-valuemin="0" aria-valuemax="100"></div>
</div>

我们需要清理此 style.width 值。我们需要使用 DomSanitizer 来清理值，并使用 SecurityContext 来指定上下文。在此示例中，上下文为样式。

// note that we need to use SecurityContext and DomSanitizer
// SecurityContext.STYLE
import { Component, OnInit, Input } from '@angular/core';
import { SecurityContext} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
  selector: 'app-challenge-progress',
  templateUrl: './challenge-progress.component.html',
  styleUrls: ['./challenge-progress.component.sass']
})
export class ChallengeProgressComponent implements OnInit {

  @Input() data: any;

  constructor(private _sanitizer: DomSanitizer) { }

  ngOnInit() {
  }

  getProgress(type: string): any {
    if(type === 'style') {
      // here is the line you are looking for
      return this._sanitizer.sanitize(SecurityContext.STYLE,this._getProgress()+'%');
    }
    return this._getProgress();
  }

  private _getProgress():number {
    if(this.data) {
      return this.data.goal_total_current/this.data.goal*100;
    }
    return 0;
  }
}

手动清理字符串

3 个答案: