AVERTISSEMENT : désinfection d'une valeur de style non sûre url

Question

Je veux définir l'image d'arrière-plan d'un DIV dans un Component Template dans mon application Angular 2. Cependant, je continue à obtenir l'avertissement suivant dans ma console et je n'obtiens pas l'effet désiré... Je ne sais pas si l'image d'arrière-plan CSS dynamique est bloquée en raison de restrictions de sécurité dans Angular 2 ou si mon modèle HTML est défectueux.

Voici l'avertissement que je vois dans ma console (j'ai changé mon url d'image en /img/path/is/correct.png :

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

Le problème, c'est que j'assainis ce qui est injecté dans mon modèle en utilisant la fonction DomSanitizationService dans Angular2. Voici le 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 j'ai simplement lié le modèle en utilisant [src]="image", par exemple :

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

et image a été transmis en utilisant bypassSecurityTrustUrl tout semble bien fonctionner... quelqu'un peut-il voir ce que je fais mal ?

Answer 1

Vous devez envelopper l'ensemble du 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, elle n'est pas considérée comme une propriété de style valide.

Answer 2

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

Answer 3

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

Voir :

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

La 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})`);
}

Answer 4

Vérifiez este tuyau pratique pour Angular2 : Utilisation :

1. dans le SafePipe code, substitut DomSanitizationService con DomSanitizer

2. fournir le SafePipe si votre NgModule

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

Answer 5

Il y a un problème ouvert pour n'imprimer cet avertissement que s'il y a effectivement quelque chose d'aseptisé : https://github.com/angular/angular/pull/10272

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