我试图动态更改 iframe 的 url，但出现错误：资源 URL 中使用的值不安全

Question

我正在尝试使用我尝试过的 angular 2 动态更改 iframe 的 src

HTML

<iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe>

组件.TS

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

declare var jQuery: any;
const $ = jQuery;

export class VideoplayerComponent implements OnInit {
    controllerSrc: string;


ngOnit(){

    $('.button1').click(function(){
        this.controllerSrc = 'https://www.videoindexer.ai/embed/insights/0c7357bd5c/?widgets=people';
});
}

}

但我收到一个错误提示

ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

不知道我还能如何做到这一点，任何帮助将不胜感激，

谢谢

Answer 1

不需要 Jquery。使用 Angular DomSanitizer

import { DomSanitizer} from '@angular/platform-browser';
    export class VideoplayerComponent implements OnInit {
        controllerSrc: any;
         constructor(private sanitizer: DomSanitizer) {}

        ngOnit(){
           const url='https://www.videoindexer.ai/embed/insights/0c7357bd5c/?widgets=people';
           this.controllerSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);

        }
}


<iframe class="controls" width="580" height="780" [src]="controllerSrc" frameborder="0" allowfullscreen></iframe>

请参考文档Angular DomSanitizer

Answer 2

首先在你学习的时候把 jQuery 从你的脑海中移除 Angular2 或 +,

否则，您将永远不知道如何以 Angular 的方式进行操作。

---

这里你如何在没有 jQuery 的情况下实现同样的事情

组件端：

// to remove error : Error: unsafe value used in a resource URL context
import { DomSanitizer } from '@angular/platform-browser';

export class VideoplayerComponent implements OnInit {
    controllerSrc: string;
    constructor(sanitizer: DomSanitizer){}

    ngOnit(){
        this.controllerSrc = this.getSafeUrl('https://www.videoindexer.ai/embed/insights/0c7357bd5c/?widgets=people');
    }

    // to remove error : Error: unsafe value used in a resource URL context
    getSafeUrl(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url)
    }

    changeIframe() {
        this.controllerSrc = this.getSafeUrl('your-new-url');
    }

}

模板方面：

<button (click)='changeIframe()'></button>

<iframe class="controls" width="580" height="780" [src]="controllerSrc" frameborder="0" allowfullscreen></iframe>