Angular 16动态设置Sitemap href遇NG0904错误求助

问题背景 #

在Angular 16中尝试动态设置站点地图（sitemap）标签的href值时，触发了NG0904错误：unsafe value used in a resource URL context。该href值是存储在数据库中的XML站点地图URL，从服务对象传递到视图时出现此问题。已实现DomSanitizer管道，但问题仍未解决。

相关代码 #

SafePipe实现 #

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from "@angular/platform-browser";

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) { }
  transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

组件代码 #

import { Component, OnInit} from '@angular/core';
import { ApiService } from 'src/app/services/api.service';
import { NgForm } from '@angular/forms';
import { ReCaptchaV3Service } from 'ng-recaptcha';
import { SafePipe } from 'src/app/safe.pipe';
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html',
  styleUrls: ['./contacto.component.scss']
})
export class ContactoComponent implements OnInit {
  data: any = {};
  formContacto = {
    'txtNombres': '',
    'txtCorreoElectronico': '',
    'txtTelefono': '',
    'txtMensaje': '',
    'token': '',
    'action': ''
  };
  constructor(private apiService: ApiService, private recaptchaV3Service: ReCaptchaV3Service, private sanitizer: DomSanitizer) { }
  ngOnInit(): void {
    this.llenarData();
  }
  llenarData(){
    this.apiService.getData('/backend/ws/pageinfo/contactopageinfo').subscribe(
      data => {
        this.apiService.metaData = data;
      }
    )
  }
}

初始模板代码 #

<link rel="sitemap" type="application/xml" href="{{ this.apiService.metaData.SITEMAP }} | safe: 'url'" />

解决方案 #

问题已解决，需对模板代码做两处修改：

1. 用属性绑定语法[href]替换插值语法{{ }}，确保Angular正确识别安全管道处理后的安全值；
2. 将安全类型从'url'改为'resourceUrl'，因为站点地图的href属于资源URL上下文，需要对应使用bypassSecurityTrustResourceUrl进行安全标记。

修改后的模板代码：

<link rel="sitemap" type="application/xml" [href]="this.apiService.metaData.SITEMAP | safe: 'resourceUrl'" />

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