html - DomSanitizer 抛出错误

Question

我信任 URL 与.. DomSanitizer 如下：

myFunction(videoLoc:any):void { 
    videoLoc = this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc); 
}

但在控制台上出现错误：

获取不安全：myFunction（https://www.youtube.com/watch?v=c9F5kMUfFKk）

我的 HTML 代码如下：

<tr *ngFor="let fetch of fetchApi.data.featured">
  <td>
     <video width="320" height="240" controls>                                                                                                                                              
     <source src=myFunction({{fetch.video_location}})>
     </video>
  </td>                                                                                                                                                                                                                                                                                                                                     
</tr> 

这就是我无法在 HTML 页面上呈现视频的原因。我在做什么错误？

Answer 1

您的模板似乎是错误的，应该是

<source [src]="myFunction(fetch.video_location)">

并在消毒后返回 videoLocation

myFunction(videoLoc:any):void {
 return this.sanitizer.bypassSecurityTrustResourceUrl(videoLoc);
}

或者你可以用管道处理这个，

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

接着，

  <source [src]="mfetch.video_location | safe">