Angular2：使用指令使 iframe src 安全

Question

我正在尝试将经过清理的 src 属性应用到 iframe，直接它工作正常，但是当把它全部放在属性指令中时，它拒绝玩球。这是指令代码，以及出现的错误信息

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)

Answer 1

您可以尝试 @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 并传递经过清理的值 as-is.

Angular2：使用指令使 iframe src 安全

Angular2: making an iframe src safe using a directive

javascript

xss

angular