Syntaxe
|
<element ng-bind-html="expression"></element>
|
Paramètres
| Nom |
Description |
| element |
Ce paramètre permet d'indiquer une balise. |
| expression |
Ce paramètre permet d'indiquer une variable ou une expression à évaluer. |
Description
Cette directive permet d'indiquer la liaison d'une propriété innerHTML d'une balise HTML vers les données de l'application.
Remarques
- Affichage de contenu HTML : Contrairement à ng-bind, insérant uniquement du texte brut, la directive ng-bind-html permet d'afficher du contenu
HTML. Cela inclut les balises HTML et leur interprétation dans l'élément cible.
- Nécessite le module ngSanitize : Par défaut, AngularJS désactive l'exécution de code HTML pour
des raisons de sécurité. Pour utiliser ng-bind-html, il est nécessaire d'inclure le module ngSanitize dans l'application afin de s'assurer que le contenu
HTML est correctement nettoyé.
- Protection contre les attaques XSS : La directive applique une "sanitization" au contenu HTML avant de
l'afficher, ce qui prévient les attaques par injection de scripts malveillants (XSS). Cependant,
pour afficher du HTML non modifié, vous devez utiliser le service $sce (Strict Contextual Escaping).
- Usage du service $sce : Si vous souhaitez afficher du contenu HTML non filtré (comme des données provenant de
sources fiables), vous pouvez utiliser $sce.trustAsHtml(). Cela indique à AngularJS que le contenu est sécurisé et peut être affiché sans modification.
- Utilisation dans des balises spécifiques : Bien qu'elle puisse être utilisée sur n'importe quelle balise HTML,
ng-bind-html est souvent employée sur des balises conteneurs comme <div> ou <span>
pour encapsuler du contenu riche, tel que des descriptions ou des extraits d'articles.
- Mise à jour dynamique : Tout comme ng-bind, ng-bind-html met à jour dynamiquement le contenu de l'élément chaque fois que la valeur du modèle lié
change. Cela en fait une directive puissante pour afficher des données riches et interactives.
- Ne doit pas être utilisée pour des données non fiables : Même avec le module ngSanitize, il est déconseillé d'utiliser ng-bind-html pour afficher
du contenu provenant d'utilisateurs non vérifiés ou de sources externes, car cela pourrait introduire des failles de sécurité si le nettoyage échoue.
- Alternative aux accolades avec HTML : Dans des cas où des accolades {{ }} pourraient être utilisées pour afficher du
HTML, ng-bind-html est une meilleure option car elle est conçue pour interpréter les balises
HTML et protéger contre les erreurs de rendu ou les attaques.
Dernière mise à jour : Dimanche, le 9 décembre 2018
