web-dev-qa-db-fra.com

Angular 5 - assainissement HTML avec pipe

Quand j'ai reçu l'avertissement:

"AVERTISSEMENT: la désinfection du HTML a supprimé du contenu"

J'ai fait des recherches et j'ai vu des gens utiliser le tuyau ci-dessous ou un tuyau qui ressemble à celui ci-dessous

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

 constructor(private _sanitizer:DomSanitizer) { }

 transform(v:string):SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(v);
 }
}

Malheureusement, je reçois toujours la même erreur même lorsque j'implémente le tuyau comme ceci:

<span [innerHTML]="specialist.blocks[0].paragraph.html | sanitizeHtml"></span>
<p [innerHTML]="package.fields.remarks | sanitizeHtml"></p>
<li [innerHTML]="package.fields.name | sanitizeHtml"></li>

Je me demande donc si j'ai mal implémenté le tuyau ou s'il y a autre chose pourquoi cela ne fonctionne pas?

Modifier:

exemple de specialist.blocks[0].paragraph.html:

"<div id =" test "class =" test ">\n <h3> SPÉCIALISTE DU NOM </ h3>\n <p> texte aléatoire </ p> </ div>\n </ div>"

exemple de package.fields.remarks:

"Arrangement: 3 nachten incl. Ontbijt en 2 greenfees p.p. met keuze uit North en South <br>\n- gratis dagelijkse toegang tot de spa (1 uur Hamman, sauna, zwembad, hydromassage)"

exemple de package.fields.name:

"Shortbreak 3 nachten <br> 2 pers./Supérieur Double/LO, golf inclus"

Obtenir les avertissements dans Firefox et Chrome

angularangular5html-sanitizing
6
Djkobus

Démo: https://stackblitz.com/edit/angular-vjt27k?file=app%2Fsanitize-html.pipe.ts

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sanitizeHtml'})

export class sanitizeHtmlPipe implements PipeTransform  {
  transform(value) {
    return value.split('< ').join('<');
  }
}
4
Chandru

Comme exemple ci-dessous, si vous essayez d'imprimer {} en html angular le traite comme une expression et donnera des erreurs afin que vous puissiez obtenir les options ci-dessous, nous avons 2 options pour la désinfection HTML, 1) Utilisation de Pipe

 import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer: DomSanitizer) { }

  transform(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }

}

Dans Component, vous pouvez l'utiliser comme {{variable | santizeHtml}}

2) En utilisant Component, comme une liaison de propriété comme ci-dessous, Déclarez html dans le fichier .ts

allowedChars = '@ # $ % ^ & * ( ) _ - ., ? < > { } [ ] ! +';

et l'utiliser comme modèle,

<span [innerHTML]="allowedChars"></span>
1
Pravin P Patil