Question

我需要有关角度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>"

关于从数据库返回时如何在角度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="{{...}}"的字符串绑定不适用于| safeHtml，而是使用[src]="... | safeHtml"

从数据库

1 个答案: