1

我的问题如下，作为服务的响应，我得到了一个应该显示给用户的整个 HTML 页面。现在这是 Angular 的一个问题，因为它认为如果我这样做，我可能会成为跨站点脚本的受害者。我从中获取 HTML 的来源是受信任的，因此我想将其列入白名单或以某种方式绕过清理程序并将视图呈现给用户。

我遇到的问题是，我得到的文件还包含用于操作 dom 的“样式”和“脚本”标签，并且无论我如何放置绕过函数调用，都会被捕获并且整个东西都无法正确渲染。有什么办法可以将 HTML 文件分开清除，然后将其重新组合在一起或其他什么？

4

2 回答 2

1

尝试这个：

import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer) { }

//where you want to use the unsafe html
const sanitizedHtml = this.sanitizer.bypassSecurityTrustResourceUrl(html);
于 2017-05-31T16:57:37.350 回答
0

您可以做的，但违反 Angular 原则的做法是将 html 标记附加到组件的 innerhtml 或使用ElementReffrom 的 DOM 中@angular/core。

示例应用组件：

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: ``,
})
export class AppComponent  {
  private htmlTemplate = `
    <div>Loading template</div>
    <script type="text/javascript">
      console.log('loaded');
    </script>
  `;
  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    let elem: Element = this.elementRef.nativeElement;

    elem.innerHTML = this.htmlTemplate;
  }
}
于 2017-05-31T16:55:37.877 回答