javascript - 从数据库中将 Iframe 注入(inject) Angular 2

Question

我需要有关 Angular 2 中的 iframe 的帮助。

首先将 iframe 直接嵌入到组件模板中效果很好。

<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>

下面是 safeUrl 管道的代码

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizationService } from "@angular/platform-browser";

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizationService) {

  }

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

一切正常。

问题是当我想从数据库中加载这个 iframe 时会抛出一个错误并且不会呈现 iframe

 ERROR: browser_adapter.js:90WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

此 Iframe 正在从 nosql 数据库中获取，并返回到嵌套在 HTML 脚本中的 Angular 2。

下面是从数据库中获取内容的示例:

"<h2>Some text returned from the DB</h2>
<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>
<p>Some more text returned from the DB</p>"

关于从数据库返回时如何让它在 Angular 2 上呈现的任何建议？谢谢。

更新

这就是我将嵌套在 HTML 代码块中的 Iframe 从数据库添加到 {{ (post$ | async)?.description }} 的方式，如下所示。

<h2>{{ (post$ | async)?.title }}</h2>
<div innerHTML="{{ (post$ | async)?.description }}" ></div>

谢谢!

Answer 1

使用

<div [innerHTML]="(post | async)?.content | safeHtml }}" >

其中 safeHtml 是一个类似于 safeUrl 的管道，但它适用于 this.sanitizer.bypassSecurityTrustHtml(html);

并删除| safeUrl 来自

src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 

使用 src="{{...}}" 的字符串绑定(bind)不适用于 | safeHtml，而不是使用 [src]="... | safeHtml"