각도 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