A resposta curta já foi fornecida aqui: use <div [innerHTML]="yourHtml">
binding.
No entanto, o restante dos conselhos mencionados aqui pode ser enganoso. O Angular possui um mecanismo de desinfecção incorporado quando você vincula a propriedades como essa. Como o Angular não é uma biblioteca de desinfecção dedicada, é muito zeloso em relação a conteúdo suspeito não correr riscos. Por exemplo, ele limpa todo o conteúdo SVG em uma sequência vazia.
Você pode ouvir conselhos para "limpar" seu conteúdo usando DomSanitizer
para marcar o conteúdo como seguro nos bypassSecurityTrustXXX
métodos. Também existem sugestões para usar pipe para fazer isso, e esse pipe é frequentemente chamado safeHtml
.
Tudo isso é enganoso, porque na verdade ignora a higienização , não a higienização do seu conteúdo. Isso pode ser uma preocupação de segurança, porque se você fizer isso no conteúdo fornecido pelo usuário ou em qualquer coisa que não tenha certeza - você se abrirá para ataques de código malicioso.
Se o Angular remover algo que você precisa com a higienização interna - o que você pode fazer em vez de desabilitar é delegar a higienização real a uma biblioteca dedicada que seja boa nessa tarefa. Por exemplo - DOMPurify.
Eu criei uma biblioteca de wrapper para ele, para que pudesse ser facilmente usada com Angular:
https://github.com/TinkoffCreditSystems/ng-dompurify
Ele também possui um canal para higienizar declarativamente o HTML:
<div [innerHtml]="value | dompurify"></div>
A diferença para os pipes sugeridos aqui é que ele realmente faz a higienização por meio do DOMPurify e, portanto, funciona para o SVG.
Uma coisa a ter em mente é que o DOMPurify é ótimo para higienizar HTML / SVG, mas não CSS. Assim, você pode fornecer o desinfetante CSS da Angular para lidar com CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
É um ɵ
prefixo interno - hense , mas é assim que a equipe do Angular o usa em seus próprios pacotes também. Essa biblioteca também funciona para o Angular Universal e para o ambiente de renomeação do lado do servidor.