错误:在资源URL上下文中使用了不安全的值(请参阅https://g.co/ng/security#xss)

Question

我正在使用angular cli，我有一个用yii2制作的rest api，我的问题如下：

我有一个组件，它由一个视频库组成，这些视频库是youtube链接(https://www.youtube.com/embed/5to1QLIxqzA)。在api中，我有该组件的所有url，所以它看起来像这样：

videos.component.html：

<div *ngFor="let video of videos" class="col-lg-4 col-sm-6">
<div class="embed-responsive-item video-noticia">
<div class="video-responsive">
<iframe class="responsive-iframe" width="730" height="415"
src="{{video.url}}" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; 
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>

videos.component.ts:

export class VideosComponent implements OnInit {
videos: Video[] = [];
constructor(private data: DataService) { }
ngOnInit(): void {
//this.data.getAllVideos().subscribe(data => console.log(data));
this.data.getAllVideos().subscribe(data => this.videos = data);        
}
}

在组件(视频(的文件夹中，我有一个调用api:的服务

data.service.ts:

@Injectable({
providedIn: 'root'
})
export class DataService {
private urlApi = 'http://localhost/web/api/web/video';
constructor(private http: HttpClient) { }
getAllVideos(): Observable<Video[]> {
return this.http.get<Video[]>(this.urlApi);
}
}

以下错误为：在此处输入图像描述

我在其他关于用DomSanitizer制作管道的文章中读到，我尝试过，但没有成功。我希望有人能帮我。谢谢。

Answer 1

在组件的构造函数中注入DomSanitizer

constructor(public sanitizer: DomSanitizer) { }

然后映射你的视频阵列

this.data.getAllVideos().subscribe(data => {
this.videos = data;
this.videos = this.videos.map(video => video.url = this.this.sanitizer.bypassSecurityTrustResourceUrl(video.url))
}