2017-01-18 3 views
1

iframe에 sanitized src 속성을 적용하려고하는데 제대로 작동하지만 직접 속성 지시문에 모두 넣으면 공을 재생하지 않습니다. 여기에 지시 코드 및 표시되는 오류 메시지는Angular2 : 지시문을 사용하여 iframe src를 안전하게 만들 수 있습니다.

import { OnInit, Directive, ElementRef, Input, Renderer } from '@angular/core'; 
import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser'; 


@Directive({ 
    selector: '[resume]' 
}) 
export class ResumeDirective implements OnInit { 

    @Input('resume') inputLink: string; 

    constructor(private _sanitizer: DomSanitizer, private el: ElementRef, private render: Renderer) { 

    } 

    ngOnInit(): void { 
     let _url: string = this.inputLink + '#zoom=100'; 

     let resumeUrl: SafeResourceUrl = this._sanitizer.bypassSecurityTrustResourceUrl(_url); 

     // this.el.nativeElement.src = resumeUrl.toString(); // same result 
     this.render.setElementProperty(this.el.nativeElement, 'src', _url); 
     // using 'srcdoc' or setElementAttribute brings same results 
    } 
} 

내가 얻을 오류 : SafeValue must use [property]=binding: /theurl/x.pdf#zoom=100 (see http://g.co/ng/security#xss)

답변

2

당신은 @HostBinding()을 시도 할 수 있습니다 - 확실하지 않은이 작동하는지하지만 '

@Directive({ 
    selector: '[resume]' 
}) 
export class ResumeDirective implements OnInit { 

    @Input('resume') inputLink: string; 

    constructor(private _sanitizer: DomSanitizer, private el: ElementRef, private render: Renderer) { 

    } 

    @HostBinding('src') 
    resumeUrl:any; 

    ngOnInit(): void { 
     let _url: string = this.inputLink + '#zoom=100'; 

     this.resumeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(_url); 
    } 
} 

this.render.setElementProperty 아무튼 위생 처리 된 값을 신경 쓰지 않으면, DOM API를 호출하고 위생 처리 된 값을 그대로 전달합니다.

+3

옙, 내가 실제로 얻은 빠른 답변 :) 감사합니다. – Ayyash

관련 문제