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

Question

我尝试使用 Angular 2 动态更改 iframe 的 src 我尝试过

超文本标记语言

<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