角度渲染在组件中动态附加 <script>-tag [重复]

Question

我试图在 Angular 组件 DOM 中注入 HTML 模板。这些 HTML 模板包含一个 <div>-tag 和 <script>-tag。

模板.html

<div>Some Text</div>
<script>(function() { alert("I am here!"); })()</script>

当我在TestComponent 中使用纯角度来执行此操作时。

test-comp.component.ts

@Component({
  selector: "[test-comp]",
  templateUrl: "./test-comp.component.html",
  styleUrls: ["./test-comp.component.css"]
})
export class TestComponent implements OnInit {
  private _snippet: SafeHtml;

  get snippet(): SafeHtml { return this._snippet; }

  constructor(
    private domSanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    const template: string = require("module/dist/template.html");
    this._snippet = this.domSanitizer.bypassSecurityTrustHtml(template);
  }
}

组件 HTML 看起来像：

test-comp.component.html

<div id="some_id" [innerHTML]="snippets"></div>

这将在 DOM 中正确注入模板，但 <script>-tag 不会被实现，也不会发出任何警报。

如果我使用 jQuery 将相同的模板注入到相同的组件中，那么<script>-tag 将被实现并提醒文本。

test-comp.component.ts

@Component({
  selector: "[test-comp]",
  templateUrl: "./test-comp.component.html",
  styleUrls: ["./test-comp.component.css"]
})
export class TestComponent implements OnInit {
  constructor(
  ) {}

  ngOnInit() {
    const template: string = require("module/dist/template.html");
    $("#some_id").after(template);
  }
}

对这种现象有什么解释吗？我有兴趣知道区别！以及为什么 jQuery 有效？

注意：我的问题与 question 没有重复，因为有人标记了它，因为我在问：为什么它用 jQuery 渲染而不是渲染与domSanitizer。我不是在问：如何做到这一点？

Answer 1

Angular.io - HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。该元素是一个明显的例外；禁止，消除脚本注入攻击的风险。在实践中， 被忽略并在浏览器控制台中出现警告。详情请参阅Security 页面。

---

但是，您可以使用以下方法绕过安全性：DomSanitizer