Aquí ya se proporcionó una respuesta breve: usar <div [innerHTML]="yourHtml">
enlace.
Sin embargo, el resto de los consejos mencionados aquí pueden ser engañosos. Angular tiene un mecanismo de desinfección incorporado cuando se une a propiedades como esa. Dado que Angular no es una biblioteca dedicada a la desinfección, es demasiado celoso de contenido sospechoso para no correr ningún riesgo. Por ejemplo, desinfecta todo el contenido SVG en una cadena vacía.
Es posible que escuche consejos para "desinfectar" su contenido al usarlo DomSanitizer
para marcar el contenido como seguro con bypassSecurityTrustXXX
métodos. También hay sugerencias para usar tubería para hacer eso y esa tubería a menudo se llama safeHtml
.
Todo esto es engañoso porque en realidad pasa por alto la desinfección , no la desinfección de su contenido. Esto podría ser un problema de seguridad porque si alguna vez haces esto en contenido proporcionado por el usuario o en algo de lo que no estás seguro, te abres a un ataque de código malicioso.
Si Angular elimina algo que necesita mediante su desinfección incorporada, lo que puede hacer en lugar de deshabilitarlo es delegar la desinfección real a una biblioteca dedicada que sea buena para esa tarea. Por ejemplo, DOMPurify.
He creado una biblioteca de contenedor para que pueda usarse fácilmente con Angular:
https://github.com/TinkoffCreditSystems/ng-dompurify
También tiene una tubería para desinfectar declarativamente HTML:
<div [innerHtml]="value | dompurify"></div>
La diferencia con las tuberías sugeridas aquí es que realmente hace la desinfección a través de DOMPurify y, por lo tanto, funciona para SVG.
Una cosa a tener en cuenta es que DOMPurify es excelente para desinfectar HTML / SVG, pero no CSS. Para que pueda proporcionar el desinfectante CSS de Angular para manejar CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
Es interno - ɵ
prefijo hense , pero así es como el equipo de Angular lo usa en sus propios paquetes de todos modos. Esa biblioteca también funciona para Angular Universal y el entorno de renedring del lado del servidor.