Angular中如何为URL和Alt文本添加安全校验？

一、图片URL的安全处理 #

你当前已引入DomSanitizer，但存在两个关键问题：模板未调用处理方法、方法未覆盖空值场景。正确实现如下：

1. 组件类中定义带空值判断的URL处理方法：

sanitizeImageUrl(url?: string) {
  if (!url) return '';
  return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

2. 模板中用属性绑定调用该方法，替代原始插值语法：

<sdps-card-image 
  [src]="sanitizeImageUrl(cardData.image?.url)" 
  alt="{{cardData.image?.altText}}" 
  is-responsive="true">      
</sdps-card-image>

注意：必须使用[src]属性绑定触发安全处理，直接插值{{}}会被Angular默认安全机制拦截，无法生效。

二、Alt文本的安全处理 #

Alt文本属于普通文本，Angular默认插值语法{{}}会自动转义HTML特殊字符（如<、>、&），从根源避免XSS风险，无需额外使用DomSanitizer。

若Alt文本来自不可信用户输入，可自定义简单过滤规则进一步限制内容：

sanitizeAltText(text?: string) {
  if (!text) return '默认图片描述';
  // 按需调整过滤规则，示例仅移除尖括号
  return text.replace(/[<>]/g, '');
}

模板调用：

alt="{{sanitizeAltText(cardData.image?.altText)}}"

完整代码示例 #

组件类（card.component.ts）

import { Component, Input } from '@angular/core';
import { Card } from "../../models/card.model";
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
})
export class CardComponent {
  @Input() cardData = new Card();  

  constructor(private sanitizer: DomSanitizer) {}

  sanitizeImageUrl(url?: string) {
    if (!url) return '';
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

  sanitizeAltText(text?: string) {
    if (!text) return '默认图片描述';
    return text.replace(/[<>]/g, '');
  }
}

模板（card.component.html）

<sdps-card-image 
  [src]="sanitizeImageUrl(cardData.image?.url)" 
  alt="{{sanitizeAltText(cardData.image?.altText)}}" 
  is-responsive="true">      
</sdps-card-image>

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