OSTRZEŻENIE: odkażanie niebezpiecznego adresu URL wartości stylu

Chcę ustawić obraz tła DIV w szablonie komponentów w mojej aplikacji Angular 2. Jednak wciąż otrzymuję następujące ostrzeżenie w mojej konsoli i nie osiągam pożądanego efektu ... Nie jestem pewien, czy dynamiczny obraz tła CSS jest blokowany z powodu ograniczeń bezpieczeństwa w Angular2, czy też mój szablon HTML jest uszkodzony.

To jest ostrzeżenie, które widzę na mojej konsoli (zmieniłem mój adres URL img na /img/path/is/correct.png:

OSTRZEŻENIE: dezynfekcja adresu URL wartości niebezpiecznego stylu (SafeValue musi używać [property] = binding: /img/path/is/correct.png (patrz http://g.co/ng/security#xss )) (patrz http: // g.co/ng/security#xss ).

Chodzi o to, że dezynfekuję to, co jest wstrzykiwane do mojego szablonu za pomocą programu DomSanitizationServicew Angular2. Oto mój kod HTML, który mam w szablonie:

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

Oto element ...

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

            }
        }
    }
}

Zwróć uwagę, że kiedy po prostu związałem się z szablonem za pomocą [src] = "obraz", na przykład:

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

i imagezostał zaliczony, gdy bypassSecurityTrustUrlwszystko wydawało się działać dobrze ... czy ktoś może zobaczyć, co robię źle?

Musisz zawrzeć całe urlzestawienie w bypassSecurityTrustStyle:

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

I mają

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

W przeciwnym razie nie jest postrzegana jako prawidłowa właściwość stylu

Użyj tego, aby <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>rozwiązać problem za mnie.

Jeśli obraz tła z liniowym gradientem ( *ngFor)

Widok:

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

Klasa:

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

Sprawdź tę poręczną rurkę dla Angular2: Zastosowanie:

1. w SafePipekodzie, zastąpić DomSanitizationServicezDomSanitizer

2. podaj, SafePipejeśli twójNgModule

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

Opierając się na dokumentach na https://angular.io/api/platform-browser/DomSanitizer , właściwym sposobem na to wydaje się być użycie sanitize. Przynajmniej w Angular 7 (nie wiem, czy to się zmieniło od wcześniej). To zadziałało dla mnie:

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 + ')');

Ponownie SecurityContext, zobacz https://angular.io/api/core/SecurityContext . Zasadniczo to tylko to wyliczenie:

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

Ten sam problem napotkałem podczas dodawania dynamicznego adresu URL w tagu obrazu w Angular 7. Dużo szukałem i znalazłem to rozwiązanie.

Najpierw napisz poniższy kod w pliku komponentu.

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

Teraz w swoim tagu graficznym HTML możesz pisać w ten sposób.

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

Możesz pisać zgodnie z wymaganiami zamiast item.imageUrl

Mam odniesienie z tej strony. dynamiczne adresy URL . Mam nadzieję, że to rozwiązanie Ci pomoże :)

Istnieje otwarty problem, aby wydrukować to ostrzeżenie tylko wtedy, gdy rzeczywiście coś zostało odkażone: https://github.com/angular/angular/pull/10272

Nie czytałem szczegółowo, kiedy to ostrzeżenie jest drukowane, gdy nic nie zostało odkażone.

Dla każdego, kto już robi to, co sugeruje ostrzeżenie, przed aktualizacją do Angular 5 musiałem zmapować moje SafeStyletypy stringprzed użyciem ich w szablonach. Po Angular 5 już tak nie jest. Musiałem zmienić moje modele, aby mieć image: SafeStylezamiast image: string. Używałem już [style.background-image]powiązania właściwości i pomijania zabezpieczeń na całym adresie URL.

Mam nadzieję, że to komuś pomoże.

Ponieważ Angular nie jest wyspecjalizowaną biblioteką do odkażania, jest nadgorliwym wobec podejrzanych treści, aby nie podejmować żadnego ryzyka. Możesz delegować czyszczenie do dedykowanej biblioteki, na przykład - DOMPurify. Oto biblioteka opakowań, którą stworzyłem, aby łatwo używać DOMPurify z Angular.

https://github.com/TinkoffCreditSystems/ng-dompurify

Ma potok do deklaratywnego oczyszczenia HTML:

<div [innerHtml]="value | dompurify"></div>

Należy pamiętać, że DOMPurify doskonale nadaje się do czyszczenia HTML / SVG, ale nie CSS. Możesz więc udostępnić narzędzie do odkażania CSS Angulara do obsługi CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

Jest to ɵprefiks wewnętrzny - hense , ale tak i tak zespół Angular używa go również we własnych pakietach.

W moim przypadku otrzymałem adres URL obrazu przed przejściem do komponentu wyświetlania i chcę go użyć jako obrazu tła, więc aby użyć tego adresu URL, muszę powiedzieć Angularowi, że jest bezpieczny i można go użyć.

W pliku .ts

userImage: SafeStyle;
ngOnInit(){
    this.userImage = this.sanitizer.bypassSecurityTrustStyle('url(' + sessionStorage.getItem("IMAGE") + ')');
}

W pliku .html

<div mat-card-avatar class="nav-header-image" [style.background-image]="userImage"></div>