В Angular автоматическая санитация (очистка) используется для обеспечения безопасности вашего приложения путем удаления или преобразования вредного контента, который может привести к атакам типа XSS (межсайтовый скриптинг). Однако в некоторых случаях вам может понадобиться предотвратить автоматическую санитацию, чтобы позволить внедрение HTML-кода (например, для реализации богатого текстового редактора). В этом ответе мы рассмотрим, как это сделать, и приведем необходимые примеры.

Что такое автоматическая санитация?

Автоматическая санитация происходит, когда Angular анализирует данные, которые вы хотите отобразить на странице, и удаляет потенциально опасные символы, такие как <script>, чтобы предотвратить исполнение скриптов, которые могут быть использованы злоумышленниками.

Как предотвратить автоматическую санитацию?

Чтобы предотвратить автоматическую санитацию, Angular предоставляет сервис DomSanitizer. С его помощью вы можете явно указать, что данные безопасны и могут быть использованы в качестве HTML-кода на странице.

Пример:

Вначале вам нужно импортировать DomSanitizer в ваш компонент:

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-sanitization-example',
  template: `<div [innerHTML]="safeHtml"></div>`
})
export class SanitizationExampleComponent {
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const untrustedHtml = '<h1>Заголовок</h1><script>alert("Уязвимость XSS!")</script>';
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(untrustedHtml);
  }
}

В этом примере мы создаем компонент SanitizationExampleComponent. Мы определяем переменную safeHtml, в которую помещаем результат работы метода bypassSecurityTrustHtml сервиса DomSanitizer. Эта переменная содержит HTML-код, который мы хотим отобразить.

В шаблоне компонента мы используем директиву innerHTML, чтобы отобразить безопасный HTML-код.

Важно!

Используя bypassSecurityTrustHtml, вы берете на себя ответственность за безопасность. Убедитесь, что контент, который вы передаете, является полностью безопасным или контролируемым, чтобы избежать уязвимостей в вашем приложении.

Заключение

Автоматическая санитация в Angular — это важный механизм безопасности, который помогает защитить ваши приложения от атак. Однако в случаях, когда вам нужно использовать ненадежный HTML-контент, пригодится сервис DomSanitizer. Весьма важно подходить к этому вопросу со всей серьезностью и внимательно проверять содержимое, которое вы собираетесь отобразить.

Предыдущий вопрос

Каков приоритет между пайпами и тернарными операторами?