Question

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

我遇到的问题是我得到的文件还包含＆＃39; 风格＆＃39;和＆＃39; 脚本＆＃39;用于操纵dom的标签，无论我如何放置旁路函数调用都会被捕获并且整个事物无法正确呈现。有没有什么办法可以将HTML文件分开清除然后把它放在一起或其他东西？

Answer 1

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

示例appcomponent：

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;
  }
}

Answer 2

试试这个：

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

//where you want to use the unsafe html
const sanitizedHtml = this.sanitizer.bypassSecurityTrustResourceUrl(html);

来自DomSanitizer的bypasssecuritytrust无法正常工作（Angular 2）

2 个答案: