Resolver error «unsafe value used in a resource URL context» en Angular

Cuando trabajamos con Angular e intentamos agregar una url externa de manera dinámica nos encontramos con que el link no funciona y, si miramos nuestra consola, nos muestra el siguiente error: «unsafe value used in a resource URL context«. Esto se debe a que, al venir la url desde una variable, Angular nos obliga a validarla para asegurarnos que sea un link seguro.

En los siguientes pasos presentaremos una manera elegante de resolverlo utilizando un pipe al cual le vamos a poder pasar una url completa o en 2 partes. Esta ultima opción nos será útil al trabajar con aplicaciones que nos envían solo un segmento del link.

Creando el pipe:

Podemos crear nuestro pipe de dos maneras: desde consola con el comando ng g p «ruta+nombre»  o creando el archivo a mano.

Para el ejemplo nombraremos a nuestro archivo «safeurl.pipe.ts».

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

@Pipe({
  name: 'safeUrl'
})
export class safeUrlPipe implements PipeTransform {

  constructor ( private _domSanitizer:DomSanitizer){}

  transform(value: string; url:string = ''): any {

    return this._domSanitizer.bypassSecurityTrustResourceUrl( url + value );

  }

}

Si utilizamos la linea de comandos de angular-cli seguramente haya quedado todo listo para ser utilizado y podemos saltarnos el siguiente paso. Si lo hicimos a mano, o por algún motivo no se configuró correctamente, tenemos que agregar en app.module nuestro pipe importándolo y sumándolo a las declaraciones:

/* Por buena práctica pusimos nuestro archivo en app/pipes */

import { safeUrlPipe } from './pipes/safeurl.pipe';


@NgModule({
  declarations: [
    .....
    safeUrlPipe,
    .....
  ],
  ....
})
...

Utilizando nuestro pipe:

Presentamos 2 ejemplos para que podamos ver como trabaja con una url completa y una segmentada.

/* Ejemplo con una url completa */
<iframe width="640" height="360" [src]="urlVideo | safeUrl" frameborder="0" allowfullscreen></iframe>

/* Ejemplo con una url segmentada */
<iframe [src]="pista.uri | safeUrl:'https://open.spotify.com/embed?uri='" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>