Date de création : 2021/03/06 12:13

Il peut arriver que lorsqu'on bind une donnée dans Angular, on est cette erreur:

ERROR Error: unsafe value used in a resource URL context (see https://g.co/ng/security#xss)

Rien de Grave il s’agit d'une sécurité pour éviter les injections XSS ¹⁾.

Pour régler ce problème il suffit de passer note donnée par le Dom Sanitizer. Nous allons voir deux méthodes, - DomSanitizer pour un usage simple. - DomSanitizer Pipe pour un usage réutilisable.

Nous allons commencer par importer les modules: DomSanitizer et SafeResourceUrl dans notre component:

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

ensuite on déclare notre url avec:

pdfUrl: SafeResourceUrl;

et dans une méthode :

this.pdfUrl = "./assets/attestation.pdf";

ce qui nous donne pour l'exemple un fichier app.components.ts:

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   pdfUrl: SafeResourceUrl;
   constructor(private domSanitizer: DomSanitizer) {
     this.pdfUrl = this.domSanitizer.bypassSecurityTrustResourceUrl("./assets/monPdf.pdf");
   }
 }

Maintenant dans le HTML une simple balise <embed> suffit:

<embed [src]="pdfUrl" type="application/pdf" width="100%" height="500" >

le principe reste le même mais la logique est déplacée dans le pipe pour ne plus encombrer le component.

Dans notre component on déclare l'URL

pdfUrl: string;

et on l'instancie dans une méthode:

this.pdfUrl = "./assets/attestation.pdf";

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pdfUrl: string;
  constructor() {
    this.pdfUrl = "./assets/attestation.pdf";
  }
}

Maintenant il faut créer le Pipe, dans la console avec le CLI on entre:

ng g pipe shared/pipe/safePipe/safePipe

on oublie pas de vérifier avant avec un –dry-run

% ng g pipe shared/pipe/safePipe/safePipe
CREATE src/app/shared/pipe/safePipe/safe-pipe.pipe.spec.ts (196 bytes)
CREATE src/app/shared/pipe/safePipe/safe-pipe.pipe.ts (221 bytes)

voila notre pipe est crée avec son fichier de test.

voici ce qu'il faut mettre dedans:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
 
@Pipe({
  name: 'safe'
})
export class SafePipePipe implements PipeTransform {
 
  constructor(private _sanitizer: DomSanitizer) { }
  transform(url: string) {
    return this._sanitizer.bypassSecurityTrustResourceUrl(url);
  }
 
}

Rien de bien compliqué:

• les deux première ligne sont les imports
• ensuite @pipe({ name: 'safe')} correspond au petit nom utiliser pour l’appeler
• dans le constructeur on initialise DomSanitizer.
• et on met la logique dans la méthode transform.

maintenant dans le HTML il suffit de mettre:

embed [src]="pdfUrl | safe" type="application/pdf" width="100%" height="500" >

La source change de

[src]="pdfUrl"

à

[src]="pdfUrl | safe"

le: | safe permet de dire: passe moi ce qui est avant dans le pipe safe, oui le petit nom du pipe.

et voila nous avons l'affichage d'un PDF dans notre HTML sans avoir besoin de passer par une lib genre pdf-viewer qui est très mal optimisée²⁾.

Page dans la catégorie: