Angular中已清理URL无法在iframe渲染，批量处理不安全视频URL求助

嘿，我来帮你搞定这两个和URL安全处理相关的问题！咱们一步步来：

一、循环处理HomeService返回的不安全URL数组 #

首先，你需要把DomSanitizer正确注入到组件中，然后遍历服务返回的URL数组，逐个进行安全处理。这里要注意更新你的导入路径，Angular新版本中SafeResourceUrl的导入已经调整了，不用再带src/security那部分。

完整的组件代码示例：

import { Component, OnInit } from '@angular/core';
import { HomeService } from '../home/home.service';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; // 修正导入路径

@Component({
  selector: 'home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  safeVideoUrls: SafeResourceUrl[] = []; // 存储处理后的安全URL

  // 构造函数中注入DomSanitizer和HomeService
  constructor(
    private homeService: HomeService,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    // 调用HomeService获取视频URL数组
    this.homeService.getVideoUrls().subscribe((unsafeUrls: string[]) => {
      // 循环处理每个URL，转换为安全的ResourceUrl
      this.safeVideoUrls = unsafeUrls.map(url => 
        this.sanitizer.bypassSecurityTrustResourceUrl(url)
      );
    });
  }
}

二、确保Sanitize后的URL在iframe中正常渲染 #

问题出在模板的绑定方式上：你需要用属性绑定语法[src]来绑定安全URL对象，而不是普通的src属性（普通src只会识别字符串，无法解析SafeResourceUrl类型）。

对应的模板代码示例（home.component.html）：

<!-- 循环渲染每个视频iframe -->
<div *ngFor="let safeUrl of safeVideoUrls">
  <iframe [src]="safeUrl" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div>

关键要点说明 #

• bypassSecurityTrustResourceUrl：这个方法告诉Angular“我信任这个URL，允许它作为资源加载”，避免了Angular的默认安全拦截。
• 属性绑定[src]：必须用这种方式绑定SafeResourceUrl类型的值，这样Angular才会正确识别并渲染它。如果直接用src="{{safeUrl}}"，会把安全对象转换成字符串，导致iframe无法加载。

这样处理后，你的视频URL既能被安全处理，又能在iframe中正常渲染啦！

内容的提问来源于stack exchange，提问作者Sumit Sharma