Une réponse courte a déjà été fournie ici: utiliser <div [innerHTML]="yourHtml">
liaison.
Cependant, les autres conseils mentionnés ici peuvent être trompeurs. Angular a un mécanisme de nettoyage intégré lorsque vous vous associez à des propriétés comme ça. Étant donné qu'Angular n'est pas une bibliothèque de nettoyage dédiée, il est trop zélé envers le contenu suspect de ne prendre aucun risque. Par exemple, il purifie tout le contenu SVG dans une chaîne vide.
Vous pourriez entendre des conseils pour "nettoyer" votre contenu en utilisant DomSanitizer
pour marquer le contenu comme sûr avec des bypassSecurityTrustXXX
méthodes. Il y a aussi des suggestions pour utiliser le tuyau pour ce faire et ce tuyau est souvent appelésafeHtml
.
Tout cela est trompeur car il contourne en fait l' assainissement , pas la désinfection de votre contenu. Cela pourrait être un problème de sécurité, car si vous le faites sur du contenu fourni par l'utilisateur ou sur tout ce dont vous n'êtes pas sûr - vous vous ouvrez à des attaques de code malveillant.
Si Angular supprime quelque chose dont vous avez besoin par sa désinfection intégrée - ce que vous pouvez faire au lieu de le désactiver, c'est déléguer la désinfection réelle à une bibliothèque dédiée qui est bonne à cette tâche. Par exemple - DOMPurify.
J'ai créé une bibliothèque de wrappers pour qu'elle puisse être facilement utilisée avec Angular:
https://github.com/TinkoffCreditSystems/ng-dompurify
Il a également un canal pour purifier déclarativement HTML:
<div [innerHtml]="value | dompurify"></div>
La différence avec les tuyaux suggérés ici est qu'il fait la désinfection via DOMPurify et fonctionne donc pour SVG.
Une chose à garder à l'esprit est que DOMPurify est idéal pour nettoyer HTML / SVG, mais pas CSS. Vous pouvez donc fournir le désinfectant CSS Angular pour gérer CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
C'est un ɵ
préfixe interne - hense , mais c'est de cette façon que l'équipe Angular l'utilise également dans leurs propres packages. Cette bibliothèque fonctionne également pour Angular Universal et l'environnement de redéfinition côté serveur.