Angular 2中*ngFor循环出现‘unsafe value used in a resource URL context’错误

这个问题我太熟了！Angular的安全机制为了防止跨站脚本攻击（XSS），会默认把外部资源URL标记为“不安全”，所以直接把API返回的youtube_url绑定到iframe的src上就会触发这个报错。别慌，按下面的方法就能轻松解决：

方法一：自定义安全URL管道（推荐，复用性强） #

管道是Angular里复用逻辑的好方式，适合多个组件都需要处理安全URL的场景：

1. 创建安全URL管道文件
   新建一个safe-url.pipe.ts文件，代码如下：

   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 {
       // 额外处理YouTube链接：把watch格式转成iframe支持的embed格式
       if (url && url.includes('youtube.com/watch')) {
         const videoId = url.split('v=')[1];
         const embedUrl = `https://www.youtube.com/embed/${videoId}`;
         return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
       }
       // 如果已经是embed格式，直接标记为安全URL
       return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
   }
   

2. 在模块中注册管道
   打开你的根模块（比如app.module.ts），把管道添加到declarations数组里：

   import { SafeResourceUrlPipe } from './safe-url.pipe';
   
   @NgModule({
     declarations: [
       // ...其他组件、管道
       SafeResourceUrlPipe
     ],
     // ...其他配置项
   })
   export class AppModule { }
   

3. 修改模板代码
   现在在遍历文章的模板里，用管道处理youtube_url：

   <div class="row" *ngFor="let Post of Posts">
     <!-- 你的文章内容输出 -->
     <div class="embed-responsive embed-responsive-16by9" *ngIf="Post.youtube_url" style="margin-bottom: 5px;">
       <iframe class="embed-responsive-item" [src]="Post.youtube_url | safeResourceUrl" allowfullscreen></iframe>
     </div>
   </div>
   

方法二：组件内直接处理（适合单个组件使用） #

如果只是单个组件需要处理这个逻辑，也可以直接在组件里写方法：

1. 组件中注入DomSanitizer并编写处理方法
   在你的文章组件里，注入安全服务并添加URL处理方法：

   import { Component } from '@angular/core';
   import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
   
   @Component({
     selector: 'app-post-list',
     templateUrl: './post-list.component.html',
     styleUrls: ['./post-list.component.css']
   })
   export class PostListComponent {
     Posts: any[] = []; // 你的文章数组
   
     constructor(private sanitizer: DomSanitizer) {}
   
     getSafeYoutubeUrl(url: string): SafeResourceUrl {
       if (url && url.includes('youtube.com/watch')) {
         const videoId = url.split('v=')[1];
         const embedUrl = `https://www.youtube.com/embed/${videoId}`;
         return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
       }
       return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
   }
   

2. 模板中调用方法
   修改模板里的iframe绑定：

   <div class="row" *ngFor="let Post of Posts">
     <!-- 你的文章内容输出 -->
     <div class="embed-responsive embed-responsive-16by9" *ngIf="Post.youtube_url" style="margin-bottom: 5px;">
       <iframe class="embed-responsive-item" [src]="getSafeYoutubeUrl(Post.youtube_url)" allowfullscreen></iframe>
     </div>
   </div>
   

关键提醒 #

• 一定要处理YouTube链接格式：如果API返回的是https://www.youtube.com/watch?v=XXX这种普通观看链接，直接放到iframe里是加载不了的，必须转成https://www.youtube.com/embed/XXX的嵌入格式，上面的代码已经帮你做了这个转换。
• 只对可信URL使用安全标记：确保你的API返回的youtube_url来自可信源，避免引入XSS风险。

内容的提问来源于stack exchange，提问作者Mihai Domocoş