执行受信任的脚本

Question

这是组件的简约示例

export class AppComponent {

  htmlSnippet: string;

  constructor(private sanitizer: DomSanitizer) {
    this.htmlSnippet = this.sanitizer.sanitize(
      SecurityContext.HTML,
      `<p>snippet works!</p><script>alert("ddd");</script>`
    );
  }
}

和模板

<p>app works!</p>

<div [innerHTML]="htmlSnippet"></div>

所有内容均已呈现。 CSS也可以。

是否可以执行该警报？

Answer 1

您只需创建脚本标签并将其附加到组件主体

  constructor(private renderer2: Renderer2, private el: ElementRef) {}

  ngAfterViewInit() {
    let scriptEl = document.createElement("script");
    scriptEl.innerText = "alert('hello')";

    this.renderer2.appendChild(this.el.nativeElement, scriptEl);
  }

demo ?

  

根据此issue，您不能将脚本标签放在   模板，因为围绕它的唯一方法是将其删除   是要如上所述动态插入script标签。