WARNUNG: Desinfizieren der URL für unsichere Stilwerte

Ich möchte das Hintergrundbild eines DIV in einer Komponentenvorlage in meiner Angular 2-App festlegen. Ich erhalte jedoch immer wieder die folgende Warnung in meiner Konsole und erhalte nicht den gewünschten Effekt ... Ich bin mir nicht sicher, ob das dynamische CSS-Hintergrundbild aufgrund von Sicherheitsbeschränkungen in Angular2 blockiert wird oder ob meine HTML-Vorlage beschädigt ist.

Dies ist die Warnung, die ich in meiner Konsole sehe (ich habe meine IMG-URL geändert in /img/path/is/correct.png:

WARNUNG: Bereinigen der URL eines unsicheren Stilwerts (SafeValue muss [property] = binding: /img/path/is/correct.png verwenden (siehe http://g.co/ng/security#xss )) (siehe http: // g.co/ng/security#xss ).

Die Sache ist, dass ich mit dem DomSanitizationServicein Angular2 bereinige, was in meine Vorlage injiziert wird. Hier ist mein HTML, das ich in meiner Vorlage habe:

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

Hier ist die Komponente ...

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

            }
        }
    }
}

Bitte beachten Sie, dass, wenn ich gerade mit [src] = "image" an die Vorlage gebunden habe, zum Beispiel:

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

und imagewurde mit bypassSecurityTrustUrlallem bestanden, schien gut zu funktionieren ... kann jemand sehen, was ich falsch mache?

Sie müssen die gesamte urlAnweisung in Folgendes einschließen bypassSecurityTrustStyle:

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

Und haben

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

Andernfalls wird es nicht als gültige Stileigenschaft angesehen

Verwenden Sie dies, um <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>das Problem für mich zu lösen.

Wenn Hintergrundbild mit linearem Farbverlauf ( *ngFor)

Aussicht:

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

Klasse:

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

Überprüfen Sie dieses handliche Rohr auf Angular2: Verwendung:

1. in dem SafePipeCode, ersetzen DomSanitizationServicemitDomSanitizer

2. Geben Sie das an, SafePipewenn IhrNgModule

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

Basierend auf den Dokumenten unter https://angular.io/api/platform-browser/DomSanitizer scheint der richtige Weg, dies zu tun, die Verwendung von sanitize zu sein. Zumindest in Angular 7 (weiß nicht, ob sich dies gegenüber zuvor geändert hat). Das hat bei mir funktioniert:

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

Zu SecurityContext siehe https://angular.io/api/core/SecurityContext . Im Grunde ist es nur diese Aufzählung:

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

Ich habe das gleiche Problem beim Hinzufügen einer dynamischen URL im Image-Tag in Angular 7 erhalten. Ich habe viel gesucht und diese Lösung gefunden.

Schreiben Sie zunächst den folgenden Code in die Komponentendatei.

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

Jetzt können Sie in Ihrem HTML-Bild-Tag so schreiben.

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

Sie können gemäß Ihren Anforderungen anstelle von item.imageUrl schreiben

Ich habe eine Referenz von dieser Seite bekommen. dynamische URLs . Hoffe diese Lösung wird dir helfen :)

Es gibt ein offenes Problem, bei dem diese Warnung nur gedruckt werden kann, wenn tatsächlich etwas bereinigt wurde: https://github.com/angular/angular/pull/10272

Ich habe nicht im Detail gelesen, wann diese Warnung gedruckt wurde, als nichts bereinigt wurde.

Für alle, die bereits das tun, was die Warnung vorschlägt, musste ich vor dem Upgrade auf Angular 5 meine SafeStyleTypen zuordnen, bevor ich stringsie in den Vorlagen verwenden konnte. Nach Angular 5 ist dies nicht mehr der Fall. Ich musste meine Modelle ändern, um eine image: SafeStylestatt zu haben image: string. Ich habe bereits die [style.background-image]Eigenschaftsbindung verwendet und die Sicherheit für die gesamte URL umgangen.

Hoffe das hilft jemandem.

Da Angular keine dedizierte Desinfektionsbibliothek ist, ist es gegenüber verdächtigen Inhalten übereifrig, kein Risiko einzugehen. Sie können die Bereinigung an eine dedizierte Bibliothek delegieren, z. B. DOMPurify. Hier ist eine Wrapper-Bibliothek, die ich erstellt habe, um DOMPurify mit Angular einfach zu verwenden.

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

Es hat eine Pipe, um HTML deklarativ zu bereinigen:

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

Eine Sache, die Sie beachten sollten, ist, dass DOMPurify sich hervorragend zum Bereinigen von HTML / SVG eignet, nicht jedoch von CSS. So können Sie Angulars CSS-Desinfektionsmittel für CSS bereitstellen:

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

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

Es ist ein internes ɵPräfix - hense , aber so verwendet es das Angular-Team sowieso auch für seine eigenen Pakete.

In meinem Fall habe ich die Bild-URL erhalten, bevor ich zur Anzeigekomponente gelangt bin, und möchte sie als Hintergrundbild verwenden. Um diese URL zu verwenden, muss ich Angular mitteilen, dass sie sicher ist und verwendet werden kann.

In der .ts-Datei

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

In der HTML-Datei

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