Angular项目如何对JSON对象中的URL进行DOMsanitizer安全处理

步骤实现 #

1. 基础依赖导入与类型定义 #

首先在需要处理数据的组件/服务中导入所需依赖，同时定义数据类型方便类型校验：

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

// 定义视频数据结构
interface VideoItem {
  id: string;
  title: string;
  // 原始url为字符串类型，消毒后为安全资源URL类型
  url: string | SafeResourceUrl;
  episode: string;
  season: string;
  likes: string;
  source: string;
}

2. 注入DomSanitizer并批量处理数据 #

在组件构造器中注入DomSanitizer实例，获取到JSON原始数据后遍历所有对象，单独对url属性执行消毒操作：

export class VideoListComponent implements OnInit {
  // 从JSON文件读取的原始数据
  rawVideoList: VideoItem[] = [];
  // 消毒后的可用数据
  processedVideoList: VideoItem[] = [];

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 批量处理所有视频对象的url属性
    this.processedVideoList = this.rawVideoList.map(item => {
      return {
        // 保留原对象所有其他属性
        ...item,
        // 仅对url属性做消毒，嵌入iframe资源需使用bypassSecurityTrustResourceUrl
        url: this.sanitizer.bypassSecurityTrustResourceUrl(item.url)
      }
    })
  }
}

3. 模板中直接使用 #

消毒后的url可以直接在模板中绑定使用，不会触发Angular安全拦截：

<div *ngFor="let video of processedVideoList">
  <h3>{{video.title}}</h3>
  <iframe width="560" height="315" [src]="video.url" [title]="video.title" frameborder="0" allowfullscreen></iframe>
</div>

可选优化：封装复用消毒管道 #

如果多个组件都需要处理这类嵌入URL，可以将消毒逻辑封装为纯管道，避免重复编码：

1. 定义安全管道

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

@Pipe({
  name: 'safeResourceUrl',
  standalone: true // 非standalone项目可去掉该行，在NgModule的declarations中声明即可
})
export class SafeResourceUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

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

2. 模板中直接调用管道处理原始url

<div *ngFor="let video of rawVideoList">
  <h3>{{video.title}}</h3>
  <iframe width="560" height="315" [src]="video.url | safeResourceUrl" [title]="video.title" frameborder="0" allowfullscreen></iframe>
</div>

注意：仅对来源明确可信的URL执行消毒操作，避免引入XSS安全风险。

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