web-dev-qa-db-fra.com

Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG

J'utilise DomSanitizer avec un fichier SVG dans une chaîne HTML.

Avant la version actuelle de Angular, cela fonctionnait très bien:

this.domSanitizer.bypassSecurityTrustHtml(content);

Maintenant, je reçois un objet appelé

SafeHtmlImpl {changingThisBreaksApplicationSecurity: "<svg> blah </svg>"}
changingThisBreaksApplicationSecurity

Existe-t-il maintenant un nouveau moyen d'accéder à la sortie de DomSanitizer? Devrais-je le recevoir en tant que type SafeHTML ou quelque chose? Quel est l'intérêt d'avoir bypassSecurityTrustHtml s'il filtre toujours le code HTML?

Des réponses sur une carte postale? S'il vous plaît...

19
Tom

DEMO: https://plnkr.co/edit/Qke2jktna55h40ubUl8o?p=preview 

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    console.log(this.sanitized.bypassSecurityTrustHtml(value))
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div [innerHtml]="html | safeHtml">
    </div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = "<svg> blah </svg>";
  }
}
33
micronyks

Utilisez DomSanitizer.bypassSecurityTrustHtml:

constructor(private sanitizer: DomSanitizer) {
}

let html = this.sanitizer.bypassSecurityTrustHtml("<svg> blah </svg>");

Plus d'informations: https://angular.io/docs/ts/latest/guide/security.html#bypass-security-apis

2