Angular sanitizer语言 - exception for YouTube iframe

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的消毒剂添加例外？问题是，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 创建一个管道

离子G管优酷

然后在管道文件中导入 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>