Angular 16电影应用YouTube轮播报NG0904错误的解决咨询

1. 操作有误之处 #

• Angular对资源URL上下文（如iframe的src、img的src等）有严格的安全校验机制，直接通过模板插值{{ video.key }}拼接YouTube嵌入地址时，Angular会判定该URL为不安全资源，因此抛出NG0904错误。
• Vue3默认没有这类严格的安全校验逻辑，所以同款实现不会触发问题，但Angular的安全机制是为了防范XSS攻击，必须遵守其规则。

2. 最可靠的修复方式 #

方式一：用DomSanitizer手动标记URL安全（官方推荐） #

这是处理此类问题的标准方案，步骤如下：

1. 组件中注入DomSanitizer并封装安全URL生成方法：

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

@Component({
  selector: 'app-trailer-carousel',
  templateUrl: './trailer-carousel.component.html',
  styleUrls: ['./trailer-carousel.component.css']
})
export class TrailerCarouselComponent {
  @Input() videos: any[] = [];
  
  constructor(private sanitizer: DomSanitizer) {}

  getSafeEmbedUrl(videoKey: string): SafeResourceUrl {
    const embedUrl = `https://www.youtube.com/embed/${videoKey}`;
    return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
  }
}

2. 模板中绑定安全URL：

<iframe [src]="getSafeEmbedUrl(video.key)" frameborder="0" allowfullscreen></iframe>

方式二：自定义安全管道（适合多组件复用场景） #

如果多个组件需要处理同类URL，可封装成管道：

1. 创建管道文件：

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. 在对应模块中声明并导出管道：

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

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

3. 模板中使用管道：

<iframe [src]="'https://www.youtube.com/embed/' + video.key | safeResourceUrl" frameborder="0" allowfullscreen></iframe>

注：若之前尝试管道无效，大概率是误用了bypassSecurityTrustHtml而非bypassSecurityTrustResourceUrl，或是管道未在模块中正确声明/导出。

内容的提问来源于stack exchange，提问作者Razvan Zamfir