Ручная очистка строки

У меня есть textarea, где пользователь будет вводить текст. Текст не может быть JavaScript или HTML и т. д. Я хочу вручную очистить данные и сохранить их в строку.

Я не могу понять, как использовать DomSanitizationService для ручной очистки моих данных.

Если я сделаю {{ textare_text }} на странице, данные будут правильно очищены.

Как мне сделать это вручную с моим string?


angular angular2-forms
person lfmunoz    schedule 25.07.2016    source источник

Ответы (3)


arrow_upward
46
arrow_downward

Вы можете дезинфицировать 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);
  }

}

Демо-плункер здесь.

Судя по вашим комментариям, вы на самом деле хотите экранировать, а не дезинфицировать.

Для этого проверьте этот плункер, где у нас есть и экранирование, и очистка.

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 экранирует те же символы, что и код angular делает (к сожалению, их экранирующая функция не является общедоступной, поэтому мы можем т использовать его).

person acdcjunior    schedule 25.07.2016
comment
Если вы измените код на следующий, вы увидите разницу. Я хочу сохранить теги, но не оценивать их. Вы знаете, как это сделать? шаблон: ` ‹div [innerHTML]=_htmlProperty›‹/div› {{_htmlProperty}} ` ( plnkr.co/edit/5vb1o2b9SX6F74U9g6F6?p=preview) - person lfmunoz; 27.07.2016
comment
Итак, то, что вы хотите, на самом деле не дезинфицируется. Чего ты хочешь, так это сбежать. -- Я отредактирую ответ. - person acdcjunior; 27.07.2016
comment
Я добавил побег. проверьте ответ. Есть новый плунжер. - person acdcjunior; 27.07.2016
comment
@BeatriceThalo Что ты имеешь в виду? Вы получаете эту ошибку? Если да, то какая линия? - person acdcjunior; 14.12.2017

arrow_upward
8
arrow_downward

В 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);
person Himanshu Teotia    schedule 19.10.2016

arrow_upward
0
arrow_downward

В угловом ^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;
  }
}
person pearpages    schedule 24.01.2017