Что происходит со скриптами внутри интерполяции Angular?

Angular автоматически очищает значения, чтобы предотвратить межсайтовый скриптинг. Это удалит небезопасный код.

В некоторых сценариях может потребоваться отключить очистку. Для этих случаев использования Angular предоставляет сервис DomSanitizer, который вы можете использовать для отключения дезинфекции. Обязательно ознакомьтесь с XSS и потенциальными рисками, прежде чем использовать этот сервис.

Две вещи здесь Interpoaltion и InnerHtml.

Интерполяцию можно использовать только для отображения простого текстового содержимого, а не HTML.

Пример: <p>Hello, {{ name }}!</p>

Вы должны использовать [innerHtml] только в том случае, если вы доверяете источнику контента или должным образом очистили данные с помощью службы DomSanitizer для предотвращения XSS-атак.

Пример: <div [innerHtml] = "htmlContent"></div>

В вашем случае, когда вы используете интерполяцию {{ this.test }} для отображения переменной, Angular обрабатывает значение как обычный текст и не выполняет никакой автоматической очистки, в результате чего теги <script> отображаются на странице как обычный текст.

С другой стороны, когда вы используете привязку [innerHtml], Angular обрабатывает значение как содержимое HTML и автоматически очищает его с помощью службы DomSanitizer, чтобы предотвратить любые вредоносные сценарии или потенциальные угрозы безопасности. Вот почему теги <script> удаляются при использовании [innerHtml].

Если вы хотите отобразить содержимое переменной в виде HTML с надлежащей очисткой, вам следует использовать привязку [innerHtml] и очистить значение с помощью службы DomSanitizer. Вот пример того, как вы можете сделать это в своем компоненте:

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

@Component({
  selector: 'app-your-component',
  template: '<div [innerHtml] = "sanitizedTest"></div>'
})
export class YourComponent implements OnInit {
  test = '<script>alert("test")</script>';
  sanitizedTest: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    // Sanitize the value before binding it to the template
    this.sanitizedTest = this.sanitizer.bypassSecurityTrustHtml(this.test);
  }
}