2017-07-07 3 views
1

Ich habe eine API, die HTML-Code (der Iframe-Objekt enthält) zurückgibt.Angular Desinfektionsmittel - Ausnahme für YouTube iframe

Der Code, der an den Client sieht wie folgt gesendet:

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

Nun, wie kann ich eine Ausnahme von Sanitizer nur für YouTube hinzufügen? Das Problem ist, der HTML-Code ist Benutzereingaben (nicht vollständig Benutzereingaben, sondern nur für Leute, denen ich vertraue, also denke ich, dass es kein Sicherheitsrisiko gibt), also kann ich nicht umgehen, securityTrustResourceUrl, richtig?

Mein Code (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(); 
} 

und HTML (page.component.html):

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

haben Sie eine Lösung für das gleiche gefunden, weil ich auch das gleiche Problem –

+0

Leider kein bin vor, aber wenn ich tun, ich hier die Lösung posten. – GTX

Antwort

0

müssen einfach nur ein Rohr mit cli

erstellen

ionische g Rohr Youtube

importieren in Rohr Datei

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

Einfuhrrohr in app.module.ts

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

dann erklären Rohr in Erklärungen

siehe unten youtube.ts Rohr Datei domsanatizer

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

Letzter Schritt in Ihrem HTML-Code:

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