webentwicklung-frage-antwort-db.com.de

Bereinigen Sie manuell eine Zeichenfolge

Ich habe eine textarea, wo der Benutzer Text eingeben wird. Der Text darf nicht aus JavaScript oder HTML bestehen. Ich möchte die Daten manuell bereinigen und in einem String speichern.

Ich kann nicht herausfinden, wie man mit DomSanitizationService meine Daten manuell bereinigt.

Wenn ich {{ textare_text }} auf der Seite mache, werden die Daten korrekt bereinigt. 

Wie mache ich das manuell mit einem string, das ich habe?

angularangular2-forms
17
lfmunoz

Sie können den HTML-Code folgendermaßen bereinigen:

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

Aus Ihren Kommentaren möchten Sie eigentlich der Desinfektion entgehen .

Dazu überprüfen Sie diesen Plunker, wo wir sowohl Flucht als auch Desinfektion haben .

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

Die oben verwendete HTML-Escape-Funktion maskiert die gleichen Zeichen wie Winkelcode (Leider ist ihre Escape-Funktion nicht öffentlich, daher können wir sie nicht verwenden).

25
acdcjunior

In Angular final kannst du so verwenden:

  1. Erster Import von "DomSanitizer" aus dem Winkel-Plattform-Browser:

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

  2. Dann im Konstruktor: 

    constructor(private _sanitizer: DomSanitizer){}

  3. Dann verwenden Sie in Ihrer Klasse wie:

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

In Winkel ^ 2.3.1

Eine Ansicht mit einer bootstrap4-Fortschrittsleiste haben. Im Beispiel benötigen wir einen Wert für 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>

Wir müssen diesen style.width -Wert desinfizieren. Wir müssen DomSanitizer für sanitize den Wert und SecurityContext verwenden, um den Kontext anzugeben. In diesem Beispiel lautet der Kontext style .

// 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;
  }
}
0
Pere Pages