Angular sanitizer - YouTube iframe 的异常(exception)

Question

我有一个返回 HTML 代码(包含 iframe 对象)的 API。

发送给客户端的代码如下所示:

<p>Something blabla</p>
<iframe allowfullscreen="true" frameborder="0" height="270" src="https://www.youtube.com/embed/someID?feature=oembed" width="480"></iframe>

现在，我如何为 YouTube 添加异常(exception)情况？问题是，HTML代码是用户输入的(不是完全用户输入，而是只有我信任的人输入，所以我猜没有安全风险)，所以我不能使用bypassSecurityTrustResourceUrl，对吗？

我的代码(page.component.ts)

constructor(private _router: Router, private _http: Http, private _sanitizer: DomSanitizer) {
    this.fetchNews();
}

fetchNews() {
    this._http
      .get(this.urlAPI)
      .map((response: Response) => {
        let json = response.json();
        this.content = json.results[0].content;
      }).subscribe();
}

和 HTML (page.component.html):

<div [innerHTML]="content">
</div>

Answer 1

只需要使用cli创建一个管道

ionic g pipe Youtube

然后在管道文件中导入domsanatizer

import { DomSanitizer } from '@angular/platform-browser';

在 app.module.ts 中导入管道

import {Youtube } from '../pipes/youtube';

然后在声明中声明管道

见下方youtube.ts管道文件

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

/**
 * Generated class for the Youtube pipe.
 *
 * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
 * Angular Pipes.
 */
@Pipe({
  name: 'youtube',
})
export class Youtube implements PipeTransform {
  constructor (private dom:DomSanitizer) {

  }
  transform(value: string, args) {
    return this.dom.bypassSecurityTrustHtml(value);
  }
}

html 代码的最后一步:

<div [innerHTML]="content | youtube">
</div>