Comment éviter l'ajout du préfixe "unsafe" à un lien par Angular 2 ?

Question

En utilisant Angular 2, existe-t-il un paramètre pour éviter d'ajouter le préfixe " dangereux : " aux liens. J'ai besoin de définir des liens pour un protocole qui n'est pas sur la liste blanche par défaut dans Angular 2, mais il est nécessaire pour notre application interne, donc le résultat est un lien invalide :

    <a href="unsafe:Notes://MYSERVER/C1256D3B004057E8" ..

Dans l'ancien Angular, il y avait compileProvider.aHrefSanitizationWhitelist, mais je ne trouve rien de similaire dans Angular 2.

Answer 1

Utilisez le DomSanitizer :

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
...
let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('Notes://MYSERVER/C1256D3B004057E8');

ou créez une méthode pour retourner l'url aseptisée :

sanitize(url:string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

et ensuite dans votre modèle :

<a [href]="sanitize('Notes://MYSERVER/C1256D3B004057E8')" ..

Démo Plunk

Answer 2

Une autre solution consiste à créer un service pipe pour transformer une URL non sécurisée en une URL sécurisée, ce qui évite de devoir réécrire le code dans tous les composants. Créez un service pipe appelé safe-url.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(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Utilisez-le ensuite dans votre vue.

Exemple : <a [href]="'Notes://MYSERVER/C1256D3B004057E8' | safeUrl"></a>

NOTE : N'oubliez pas d'injecter ce service de tuyauterie dans votre système d'information. app.module.ts fichier :

import { SafeUrlPipe } from './shared/safe-url.pipe'; // Make sure your safe-url.pipe.ts file path is matching.

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