web-dev-qa-db-fra.com

Désinfecter manuellement une chaîne

J'ai un textarea où l'utilisateur va taper du texte. Le texte ne peut pas être JavaScript ou HTML, etc. Je veux nettoyer manuellement les données et les enregistrer dans une chaîne.

Je n'arrive pas à comprendre comment utiliser DomSanitizationService pour nettoyer manuellement mes données.

Si je fais {{ textare_text }} sur la page, les données sont correctement filtrées. 

Comment est-ce que je fais cela manuellement à une string que j'ai?

angularangular2-forms
17
lfmunoz

Vous pouvez nettoyer le code HTML comme suit:

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

D'après vos commentaires, vous voulez réellement escapeing et non une désinfection.

Pour cela, vérifiez ceci plunker, où nous avons échappé et assaini }.

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

La fonction d'échappement HTML utilisée ci-dessus échappe aux mêmes caractères que le code angulaire le fait (malheureusement, leur fonction d'échappement n'est pas publique, nous ne pouvons donc pas l'utiliser).

23
acdcjunior

En finale angulaire, vous pouvez utiliser comme ceci:

  1. Première importation "DomSanitizer" depuis un navigateur de plateforme angulaire:

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

  2. Puis en constructeur: 

    constructor(private _sanitizer: DomSanitizer){}

  3. Puis utilisez dans votre classe comme:

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

Dans angular ^ 2.3.1

Avoir une vue en utilisant une barre de progression bootstrap4. Voir que dans l'exemple nous avons besoin d'une valeur pour 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>

Nous devons supprimer cette valeur style.width. Nous devons utiliser DomSanitizer to sanitize la valeur et SecurityContext pour spécifier le contexte. Dans cet exemple, le contexte est 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