Здесь уже был дан короткий ответ: используйте <div [innerHTML]="yourHtml">привязку.
Однако остальные советы, упомянутые здесь, могут вводить в заблуждение. Angular имеет встроенный механизм очистки, когда вы привязываете к таким свойствам. Так как Angular не является специальной библиотекой для очистки, он слишком усердно относится к подозрительному контенту, чтобы не рисковать. Например, он очищает все содержимое SVG в пустую строку.
Вы можете услышать советы, чтобы «дезинфицировать» ваш контент, используя методы, DomSanitizerчтобы пометить контент как безопасный с помощью bypassSecurityTrustXXXметодов. Есть также предложения использовать pipe для этого, и этот канал часто называют safeHtml.
Все это вводит в заблуждение, потому что на самом деле обходит санитарную обработку , а не санитарную обработку вашего контента. Это может быть проблемой безопасности, потому что если вы когда-либо делаете это на предоставленном пользователем контенте или на чем-то, в чем вы не уверены - вы открываете себя для атак злонамеренного кода.
Если Angular удаляет то, что вам нужно, с помощью встроенной очистки - то, что вы можете сделать вместо ее отключения, - делегировать фактическую очистку выделенной библиотеке, которая хороша для этой задачи. Например - DOMPurify.
Я сделал для него библиотеку-обертку, чтобы ее можно было легко использовать с Angular:
https://github.com/TinkoffCreditSystems/ng-dompurify
У него также есть канал для декларативной очистки HTML:
<div [innerHtml]="value | dompurify"></div>
Отличие от предложенных здесь каналов заключается в том, что он действительно выполняет очистку с помощью DOMPurify и, следовательно, работает для SVG.
Следует помнить, что DOMPurify отлично подходит для дезинфекции HTML / SVG, но не CSS. Таким образом, вы можете предоставить CSS-дезинфицирующее средство Angular для обработки CSS:
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
Он внутренний - ɵпрефикс hense , но так или иначе, команда Angular использует его и в своих собственных пакетах. Эта библиотека также работает для Angular Universal и среды перерисовки на стороне сервера.