Angular中iframe嵌入API获取的视频无法加载问题求助

问题原因 #

Angular的安全机制会拦截动态绑定的资源URL，防止潜在的XSS攻击。直接用{{videoUrl}}插值绑定到iframe的src属性时，URL会被Angular判定为不安全内容，导致视频无法加载。

解决方法 #

方法一：组件内直接处理URL #

1. 在组件中引入安全相关依赖：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

2. 注入DomSanitizer并处理视频URL：

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html'
})
export class VideoPlayerComponent implements OnInit {
  videoUrl: string; // 从API获取的原始视频URL
  safeVideoUrl: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 替换为你的API请求逻辑获取videoUrl
    this.videoUrl = 'https://www.youtube.com/watch?v=Vt-Wf7d0CFo';
    // 将原始URL标记为安全的资源URL
    this.safeVideoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.videoUrl);
  }
}

3. 模板中绑定处理后的安全URL：

<iframe [src]="safeVideoUrl" width="320" height="200" frameborder="0" allowfullscreen></iframe>

方法二：自定义管道（推荐，便于复用） #

1. 创建安全URL管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safeResourceUrl'
})
export class SafeResourceUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

2. 在对应NgModule中声明并导出管道：

import { NgModule } from '@angular/core';
import { SafeResourceUrlPipe } from './safe-resource-url.pipe';

@NgModule({
  declarations: [SafeResourceUrlPipe],
  exports: [SafeResourceUrlPipe]
})
export class SharedModule {}

3. 模板中通过管道处理URL：

<iframe [src]="videoUrl | safeResourceUrl" width="320" height="200" frameborder="0" allowfullscreen></iframe>

内容的提问来源于stack exchange，提问作者Chandika Chathuranga