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. Los campos obligatorios están marcados con *