typescript - AVERTISMENT: sanitizarea valorii stilului nesigure url

Vreau să stabilesc imaginea de fundal a unui DIV într-un șablon de componentă în aplicația mea Angular 2. Totuși, continui să primesc următorul avertisment în consola mea și nu obțin efectul dorit... Nu sunt sigur dacă imaginea de fundal CSS dinamică este blocată din cauza restricțiilor de securitate în Angular2 sau dacă șablonul meu HTML este defect.

Aceasta este avertizarea pe care o văd în consola mea (am schimbat URL-ul imaginii mele în /img/path/is/correct.png:

AVERTISMENT: se curăță valoarea stilului nesigur url(SafeValue trebuie să folosească [property]=binding: /img/path/is/correct.png (vezi http://g.co/ng/security#xss)) (vezi http://g.co/ng/security#xss).

Problema este că fac igienizarea a ceea ce este injectat în șablonul meu folosind DomSanitizationService în Angular2. Iată HTML-ul pe care îl am în șablonul meu:

<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>

Iată componenta...

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;
                }

            }
        }
    }
}

Vă rugăm să rețineți că atunci când m-am legat doar de șablon folosind [src]="image", de exemplu:

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

și image a fost transmis folosind bypassSecurityTrustUrl, totul părea să funcționeze bine... poate cineva să vadă ce greșesc?

Răspuns #1

Trebuie să înfășurați întreaga declarație url în bypassSecurityTrustStyle:

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

Și au

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

Altfel, nu este considerat o proprietate de stil validă

Răspunsul #2

Folosește acest <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div> asta a rezolvat problema pentru mine.

Răspunsul #3

Dacă imaginea de fundal are un gradient liniar (*ngFor)

Vizualizare:

<div [style.background-image]="getBackground(product.img)">
</div>

Clasă:

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

Răspunsul #4

Am avut aceeași problemă atunci când am adăugat un URL dinamic în tag-ul Image în Angular 7. Am căutat mult și am găsit această soluție.

Mai întâi, scrieți codul de mai jos în fișierul componentă.

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

Acum, în eticheta ta HTML pentru imagine, poți scrie astfel.

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

Puteți scrie conform cerinței dvs. în loc de item.imageUrl

Am obținut o referință de pe acest site.dynamic urls. Sper că această soluție te va ajuta :)

Răspunsul #5

Verifică acest pipe util pentru Angular2: Utilizare:

1. în codul SafePipe, înlocuiește DomSanitizationService cu DomSanitizer

2. oferiți SafePipe dacă NgModule-ul dvs.

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