Problem NG0904 unsafe value used in a resource URL context security xss

Question

I'm new to Angular. I have this problem when trying to implement the href value of the Sitemap tag dynamically. This value contains the url of the xml which is stored in the database. The problem arises when transferring the data from the object to the view in angular resulting in the problem NG0904 unsafe value used in a resource URL context. I have implemented a DomSanitizer pipe but I can't overcome the problem. I would like you to give me a hand with it.

Angular 16. Display data dynamically

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;
      }
    )
  }

<!doctype html>
<html lang="es-PE">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="twitter:title" content="{{ this.apiService.metaData.OG_TITULO }}" />
        <meta name="twitter:description" lang="es" content="{{ this.apiService.metaData.DESCRIPCION }}" />
        <meta name="twitter:image" content="{{ this.apiService.metaData.OG_TWITTER_IMAGE }}" />
        <title>{{ this.apiService.metaData.TITULO }}</title>
        <!-- Sitemap -->
        <link rel="sitemap" type="application/https://stackoverflow.com/posts/78820954/edit#xml" href="{{ this.apiService.metaData.SITEMAP }} | safe: 'url'" />
        <!-- Favicon -->
        <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">
         <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
    </head>
    <body id="home" data-spy="scroll" data-offset="120">
        <app-preloader></app-preloader>
        <router-outlet></router-outlet>
        <app-footer></app-footer>
    </body>
</html>

** UPDATE ** Thanks for the help my friend. The problem is solved by modifying the syntax in this way. <link rel="sitemap" type="application/xml" [href]="this.apiService.metaData.SITEMAP | safe: 'resourceUrl'" />

If you want to change meta tags use angular.dev/api/platform-browser/Meta — Bojan Kogoj
– Bojan Kogoj, Commented Aug 1, 2024 at 12:42

Verity · Accepted Answer · 2024-08-01 12:41:01Z

0

You were almost there, but you need to make sure that you use your SafePipe correctly inside the template.

href="{{ this.apiService.metaData.SITEMAP }} | safe: 'url'"

should be

href="{{ this.apiService.metaData.SITEMAP | safe: 'url' }}"

or

[href]="this.apiService.metaData.SITEMAP | safe: 'url'"

You may also need to use resourceUrl instead of url.

answered Aug 1, 2024 at 12:41

Verity

3551 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dev Cop Over a year ago

Hi friend. I have tried this way and it worked correctly. <link rel="sitemap" type="application/xml" [href]="this.apiService.metaData.SITEMAP | safe: 'resourceUrl'" /> but this way does not work <link rel="sitemap" type="application/xml" href="{{ this.apiService.metaData.SITEMAP | safe: 'resourceUrl' }}" /> What would be the correct way to display it like this?

Verity Over a year ago

@DevCop What error does it show? Or is it just not working at all? You could try wrapping the statement in parantheses like this: {{ (this.apiService.metaData.SITEMAP | safe: 'resourceUrl') }}.

Dev Cop Over a year ago

This way it doesn't work. {{ (this.apiService.metaData.SITEMAP | safe: 'resourceUrl') }}

Collectives™ on Stack Overflow

Problem NG0904 unsafe value used in a resource URL context security xss

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related