javascript - Angular 2 - 异常 : Error: unsafe value used in a resource URL context

标签 javascript angular typescript

我收到以下错误:

Angular 2 - EXCEPTION: Error: unsafe value used in a resource URL context

这可能与启动时没有立即显示媒体项有关吗?还是与 URL 不安全有关?我正在尝试对其进行 sanitizer 。

export class HomeComponent {

  sanitizer: DomSanitizationService;
  errorMessage: string;
  activeMedia: MediaItem = new MediaItem(0, '', '', '', '', '', '');

  constructor(
    private mediaStorage: MediaStorageService, 
    private harvesterService: HarvesterService, 
    sanitizer: DomSanitizationService) {

    this.sanitizer = sanitizer;
    // Initial call - 
    harvesterService.getMediaItems(10, 'type', 'category');
    let subscription = harvesterService.initialMediaHarvestedEvent.subscribe(() => {
      this.activeMedia = mediaStorage.mediaList[0];
      let newURL = this.activeMedia.URL + '?rel=0&autoplay=1';
      newURL = newURL.replace('watch?v=', 'v/');
      this.activeMedia.URL = newURL; //sanitizer.bypassSecurityTrustUrl(newURL);
      console.log(newURL);
    });
  }

  cleanURL(oldURL: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustUrl(oldURL);
  }
}

模板代码为:

<div class="row" >
    <iframe 
      id="video"  
      class="video" 
      src="{{ cleanURL(activeMedia.URL) }}" 
      frameborder="0" 
      allowfullscreen>
    </iframe>
</div>

最佳答案

更新:更改后

 src="{{cleanURL(activeMedia.URL)}}"

到:

 [src]="cleanURL(activeMedia.URL)"

我得到:原始异常:错误:需要一个安全的 ResourceURL,得到一个 URL

通过将 cleanURL 方法中的代码更改为:

 return this.sanitizer.bypassSecurityTrustResourceUrl(oldURL);

代替:

 return this.sanitizer.bypassSecurityTrustUrl(oldURL);

关于javascript - Angular 2 - 异常 : Error: unsafe value used in a resource URL context,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39858992/

相关文章:

angular - 如何将 Angular 应用程序从keycloak登录重定向到特定路线

javascript - Typescript 隐藏父类(super class)的 Prop

typescript - Visual Studio Code 中的自动 JSDoc 生成坏了?

javascript - React-Native StackNavigator

Javascript:在类内分配onclick

javascript - window.location.href 不会重定向到不同的域

node.js - 更新到 Angular 8 CLI 后抛出 ".getColorDepth is not a function"

javascript - 将 JSON 响应转换为 JavaScript 中的正确编码

Angular:测试返回可观察值的守卫

angular - ng e2e 测试超时