执行可信脚本答案

【问题标题】：Execute trusted script执行可信脚本
【发布时间】：2020-04-09 00:28:20
【问题描述】：

这是一个简单的组件示例

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 也能正常工作。

有没有办法执行该警报？

【问题讨论】：

您为什么要首先执行该警报？（无论如何，您可以使用bypassSecurityTrustHtml 方法绕过对 HTML 的清理：angular.io/api/platform-browser/…）
我认为像这样在模板中添加脚本标签是行不通的，你只有一个选择是创建一个脚本标签并附加到模板中检查这个问题github.com/angular/angular/issues/4903

标签： angular xss html-sanitizing

【解决方案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，您不能在模板，因为它将被删除，这是解决此问题的唯一方法就是像上面那样动态插入脚本标签。

【讨论】：

所以，如果我想用样式和脚本渲染一个复杂的 HTML 页面，我可以使用bypassSecurityTrustHtml，然后使用正则表达式找到该 HTML 中的所有脚本并一一添加。对吗？
你的项目中是否有这些文件，因为你可以将它们添加到你的项目包中，或者如果你从 npm 安装它们仍然是相同的情况
@TarasHupalo 如果您只是将脚本和样式标签放在 index.html 中，一切都会正常工作，角度团队所说的只是将脚本标签放在 index.html 中，或者您可以包含带有 angular.json 样式和脚本数组的主题
@TarasHupalo 你还有问题吗？我需要举个例子吗？？
这种方法可以满足我的需要。谢谢。