web-dev-qa-db-fra.com

AVERTISSEMENT: désinfection de l'URL des valeurs de style dangereuses

Je souhaite définir l'image d'arrière-plan d'une DIV dans un modèle de composant dans mon application Angular 2. Cependant, je reçois toujours l'avertissement suivant dans ma console et je n'obtiens pas l'effet souhaité ... Je ne sais pas si l'image de fond CSS dynamique est bloquée en raison de restrictions de sécurité dans Angular2 ou si mon modèle HTML est cassé.

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

AVERTISSEMENT: élimination de l'url de la valeur de style non sécurisée (SafeValue doit utiliser [propriété] = liaison: /img/path/is/correct.png (voir http://g.co/ng/security#xss ) ) (voir http://g.co/ng/security#xss ).

Le problème est que je désinfecte ce qui est injecté dans mon modèle en utilisant le DomSanitizationService dans Angular2. Voici mon code HTML que j'ai dans mon modèle:

<div>
    <div>
        <div class="header"
             *ngIf="image"
             [style.background-image]="'url(' + image + ')'">
        </div>

        <div class="zone">
            <div>
                <div>
                    <h1 [innerHTML]="header"></h1>
                </div>
                <div class="zone__content">
                    <p
                       *ngFor="let contentSegment of content"
                       [innerHTML]="contentSegment"></p>
                </div>
            </div>
        </div>
    </div>
</div>

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

            }
        }
    }
}

Veuillez noter que lorsque je viens de me lier au modèle en utilisant [src] = "image", par exemple:

<div *ngIf="image">
    <img [src]="image">
</div>

et image a été adopté avec bypassSecurityTrustUrl tout semblait bien fonctionner ... quelqu'un peut-il voir ce que je fais mal?

typescriptangularxss
76
Mark Sandman

Vous devez envelopper la totalité de l'instruction url dans le bypassSecurityTrustStyle:

<div class="header" *ngIf="image" [style.background-image]="image"></div>

Et ont

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

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

87
PierreDuc

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

Voir:

<div [style.background-image]="getBackground(trendingEntity.img)" class="trending-content">
</div>

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})`);
}
41
Swapnil Patwa

Utilisez ceci <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div> ceci résout le problème pour moi.

33
Sammy-Rogers Geek

Vérifiez this pipe pratique pour Angular2:

  1. dans le code SafePipe, remplacez DomSanitizationService par DomSanitizer

  2. fournissez la SafePipe si votre NgModule

  3. <div [style.background-image]="'url(' + your_property + ')' | safe: 'style'"></div>

7
SimoneMSR

J'ai eu le même problème en ajoutant l'URL dynamique dans la balise Image dans Angular 7. J'ai beaucoup cherché et trouvé cette solution.

Commencez par écrire ci-dessous le code dans le fichier composant.

constructor(private sanitizer: DomSanitizer) {}
public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

Maintenant, dans votre balise d'image html, vous pouvez écrire comme ceci.

<img class="image-holder" [src]=getSantizeUrl(item.imageUrl) />

Vous pouvez écrire selon vos besoins au lieu de item.imageUrl

J'ai eu une référence de ce site . RL dynamiques . J'espère que cette solution vous aidera :)

4
Arjun

Il y a un problème en suspens pour imprimer cet avertissement s'il y avait réellement quelque chose d'assaini: https://github.com/angular/angular/pull/10272

Je n'ai pas lu en détail quand cet avertissement est imprimé quand rien n'a été nettoyé.

3
Günter Zöchbauer

Sur la base de la documentation à https://angular.io/api/platform-browser/DomSanitizer , la bonne façon de le faire semble être d'utiliser sanitize. Au moins dans Angular 7 (je ne sais pas si cela a changé auparavant). Cela a fonctionné pour moi:

import { Component, OnInit, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

constructor(
    private sanitizer: DomSanitizer
) { }

this.sanitizer.sanitize(SecurityContext.STYLE, 'url(' + this.image + ')');

Concernant SecurityContext, voir https://angular.io/api/core/SecurityContext . Fondamentalement, c'est juste cette énumération:

enum SecurityContext {
  NONE: 0
  HTML: 1
  STYLE: 2
  SCRIPT: 3
  URL: 4
  RESOURCE_URL: 5
}
1
Dovev Hefetz

Pour quiconque fait déjà ce que l'avertissement vous suggère, avant la mise à niveau vers Angular 5, je devais mapper mes types SafeStyle sur string 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 un image: SafeStyle au lieu de image: string. J'utilisais déjà la liaison de propriété [style.background-image] et contournais la sécurité sur toute l'URL.

J'espère que ça aide quelqu'un.

1
Jake Smith