角2 - 安全でない値を持つiframeの配列を反復する

Question

私は、iframeの配列に介入する必要があります。例えば

：私はそれは私がエラーun safe value

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../../shared/data'; 

@Component({ 
    template: ` 
     <div>Feed</div> 
      <div *ngFor="let topic of topics; trackBy: trackByFn"> 
       <div *ngIf="topic.type == 'discussion'"> 
        <div *ngIf="topic.video"> 
         <div class="video-container"> 
          <iframe src="{{topic.video.url}}" ></iframe> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    ` 
}) 
export class CompanyComponent implements OnInit { 
    constructor(
     private dataService: DataService 
    ) {} 
    ngOnInit() { 
     this.topics = this.dataService.topics; 
    } 
} 

エラーURL、スクリプト、HTML、リソースを扱うときは、バイパスのセキュリティを必要とする

Error: Uncaught (in promise): Error: Error in ./CompanyComponent class CompanyComponent - inline template:29:41 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) 
Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) 
I see similar post, there is solution to deal with un safe value however they do not show how to deal with array of iframes. That the solution I'm looking for. 

Answer 1

を持って行う、問題がされたときに

カスタムパイプ：

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

@Pipe({ name: 'safeUrl' }) 
export class SafePipe implements PipeTransform { 
    constructor(private sanitizer: DomSanitizer) {} 
    transform(url: string) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 
} 

他のコンポーネント：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <iframe [src]="'https://www.youtube.com/embed/' + testRequestId | safeUrl" width="560" height="315" allowfullscreen></iframe> 
    ` 
}) 
export class AppComponent { 
    testRequestId = 'uelHwf8o7_U'; 

} 

デモ：https://embed.plnkr.co/PJQx02/

あなたの場合：

<iframe [src]="topic.video.url | safeUrl" ></iframe> 

文書：あなたはフリーランスの仕事のために開いhttps://angular.io/docs/ts/latest/guide/security.html