AVERTISSEMENT: désinfection de l’URL de valeur de style non sécurisée

Je veux définir l’image de fond d’une DIV dans un modèle de composant dans mon application Angular 2. Cependant, je continue à recevoir l’avertissement suivant dans ma console et je n’ai pas l’effet désiré … Je ne sais pas si l’image d’arrière-plan CSS dynamic est bloquée en raison de ressortingctions de sécurité dans Angular2 ou si mon modèle HTML est endommagé.

C’est l’avertissement que je vois dans ma console (j’ai changé mon URL à /img/path/is/correct.png :

AVERTISSEMENT: désinfection de l’URL de valeur de style non sécurisée (SafeValue doit utiliser [property] = binding: /img/path/is/correct.png (voir http://g.co/ng/security#xss )) (voir http: // g.co/ng/security#xss ).

Le fait est que je nettoie ce qui est injecté dans mon modèle en utilisant DomSanitizationService dans Angular2. Voici mon HTML que j’ai dans mon template:

 

Voici le composant …

 Import { DomSanitizationService, SafeHtml, SafeUrl, SafeStyle } from '@angular/platform-browser'; @Component({ selector: 'example', templateUrl: 'src/content/example.component.html' }) export class CardComponent implements OnChanges { public header:SafeHtml; public content:SafeHtml[]; public image:SafeStyle; public isActive:boolean; public isExtended:boolean; constructor(private sanitization:DomSanitizationService) { } ngOnChanges():void { map(this.element, this); function map(element:Card, instance:CardComponent):void { if (element) { instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header); instance.content = _.map(instance.element.content, (input:ssortingng):SafeHtml => { return instance.sanitization.bypassSecurityTrustHtml(input); }); if (element.image) { /* Here is the problem... I have also used bypassSecurityTrustUrl */ instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image); } else { instance.image = null; } } } } } 

S’il vous plaît noter que lorsque je suis juste lié au modèle en utilisant [src] = “image”, par exemple:

 

et l’ image été transmise à l’aide de bypassSecurityTrustUrl tout semblait fonctionner correctement … quelqu’un peut-il voir ce que je fais mal?

Vous devez envelopper toute l’instruction url dans le bypassSecurityTrustStyle :

 

Et avoir

 this.image = this.sanitization.bypassSecurityTrustStyle(`url(${element.image})`); 

Sinon, il n’est pas considéré comme une propriété de style valide

Si image de fond avec gradient linéaire ( *ngFor )

Vue:

  

Classe:

 import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; constructor(private _sanitizer: DomSanitizer) {} getBackground(image) { return this._sanitizer.bypassSecurityTrustStyle(`linear-gradient(rgba(29, 29, 29, 0), rgba(16, 16, 23, 0.5)), url(${image})`); } 

Vérifiez ce tuyau pratique pour Angular2: Utilisation:

  1. dans le code SafePipe , remplacez DomSanitizationService par DomSanitizer

  2. fournir le SafePipe si votre NgModule

Il y a un problème ouvert pour imprimer uniquement cet avertissement s’il y avait réellement quelque chose de désinfecté: https://github.com/angular/angular/pull/10272

Je n’ai pas lu en détail lorsque cet avertissement est imprimé lorsque rien n’a été désinfecté.

Utilisez cette

ceci a résolu le problème pour moi.

Pour toute personne qui fait déjà ce que l’alerte suggère, avant la mise à niveau vers Angular 5, je devais mapper mes types SafeStyle en ssortingng avant de les utiliser dans les modèles. Après Angular 5, ce n’est plus le cas. J’ai dû changer mes modèles pour avoir une image: SafeStyle au lieu de image: ssortingng . J’utilisais déjà la [style.background-image] pour contourner et contourner la sécurité sur toute l’URL.

J’espère que cela aide quelqu’un.