AngularJs – Mostrar texto como html $sanitize $sce


Estuve trabajando en una api que ahora devolvía texto con html y en la página no se visualizaba correctamente los tag html, aparecían en texto plano y no interpretaba:

«M&uacute;sica <b>texto</b>«

Angular por seguridad trata toda la información como texto plano y para poder interpretar debes indicarle exactamente que texto o variable es confiable para poder mostrarlo como html.

Hay  dos formas de realizar esto, con el servicio $sanitize de angular o con el servicio $sce (Strict Contextual Escaping).

$sanitize

Si estás usando AngularJs, debes agregar como dependencia angular-sanitize.js el cual puedes conseguir en la documentación oficial o cualquier otro sitio proveedor, por ejemplo: https://cdnjs.com/libraries/angular-sanitize

Debes agregarlo a tú aplicación:

Puedes usarlo manualmente de esta manera:

O usando la directiva ng-bind-html:

Automáticamente el modulo $sanitize aplica un filtro antes de mostrar la variable TextoHtml para mantener seguro el sitio web.

$sce

Ahora si no quieres incluir una dependencia ni realizar tantas modificaciones, puedes utilizar $sce como un servicio al que puedes usar manualmente para tú mismo indicar que texto es confiable y se pueda utilizar para interpretar html.

Un ejemplo usando en una variable:

O también puedes crearlo en un filtro para luego usarlo como directiva:

Y luego usarlo de esta manera en cualquier lugar de tú aplicación y siempre aplicando la directiva «trustHtml»:

En lo personal este último me ha resultado más útil por la estructura de los proyectos que vengo trabajando.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

*

code