ADVERTENCIA: desinfectar la URL de valor de estilo inseguro

Quiero configurar la imagen de fondo de un DIV en una plantilla de componente en mi aplicación Angular 2. Sin embargo, sigo recibiendo la siguiente advertencia en mi consola y no obtengo el efecto deseado ... No estoy seguro de si la imagen de fondo CSS dinámica se está bloqueando debido a restricciones de seguridad en Angular2 o si mi plantilla HTML está rota.

Esta es la advertencia que veo en mi consola (he cambiado mi URL de imagen a /img/path/is/correct.png:

ADVERTENCIA: desinfectar la URL del valor de estilo inseguro (SafeValue debe usar [propiedad] = enlace: /img/path/is/correct.png (ver http://g.co/ng/security#xss )) (ver http: // g.co/ng/security#xss ).

Lo que pasa es que desinfecciono lo que se inyecta en mi plantilla usando DomSanitizationServiceen Angular2. Aquí está mi HTML que tengo en mi plantilla:

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

Aquí está el componente ...

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

            }
        }
    }
}

Tenga en cuenta que cuando acabo de enlazar a la plantilla usando [src] = "image", por ejemplo:

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

y imagese pasó usando bypassSecurityTrustUrltodo parecía funcionar bien ... ¿alguien puede ver lo que estoy haciendo mal?

Tienes que envolver toda la urldeclaración en bypassSecurityTrustStyle:

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

Y tiene

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

De lo contrario, no se considera una propiedad de estilo válida.

Use esto, <div [ngStyle]="{'background-image':'url('+imageUrl+')'}"></div>esto resolvió el problema para mí.

Si imagen de fondo con degradado lineal ( *ngFor)

Ver:

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

Clase:

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

Consulte esta práctica tubería para Angular2: Uso:

1. en el SafePipecódigo, sustituir DomSanitizationServiceconDomSanitizer

2. proporcione el SafePipesi suNgModule

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

Según los documentos en https://angular.io/api/platform-browser/DomSanitizer , la forma correcta de hacer esto parece ser usar sanitize. Al menos en Angular 7 (no sé si esto cambió desde antes). Esto funcionó para mí:

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

Con respecto a SecurityContext, consulte https://angular.io/api/core/SecurityContext . Básicamente es solo esta enumeración:

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

Tuve el mismo problema al agregar una URL dinámica en la etiqueta de imagen en Angular 7. Busqué mucho y encontré esta solución.

Primero, escriba el código siguiente en el archivo del componente.

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

Ahora, en su etiqueta de imagen html, puede escribir así.

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

Puede escribir según su requisito en lugar de item.imageUrl

Obtuve una referencia de este sitio. URL dinámicas . Espero que esta solución te ayude :)

Hay un problema abierto para imprimir esta advertencia solo si realmente hubo algo desinfectado: https://github.com/angular/angular/pull/10272

No leí en detalle cuando se imprimió esta advertencia cuando no se desinfectó nada.

Para cualquiera que ya esté haciendo lo que la advertencia sugiere que haga, antes de la actualización a Angular 5, tuve que asignar mis SafeStyletipos stringantes de usarlos en las plantillas. Después de Angular 5, este ya no es el caso. Tuve que cambiar mis modelos para tener un en image: SafeStylelugar de image: string. Ya estaba usando el [style.background-image]enlace de propiedad y eludiendo la seguridad en toda la URL.

Espero que esto ayude a alguien.

Dado que Angular no es una biblioteca de desinfección dedicada, es demasiado entusiasta con el contenido sospechoso para no correr riesgos. Puede delegar la desinfección a una biblioteca dedicada, por ejemplo, DOMPurify. Aquí hay una biblioteca contenedora que hice para usar fácilmente DOMPurify con Angular.

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

Tiene una tubería para desinfectar HTML declarativamente:

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

Una cosa a tener en cuenta es que DOMPurify es excelente para desinfectar HTML / SVG, pero no CSS. Entonces puede proporcionar el desinfectante CSS de Angular para manejar CSS:

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

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

Es interno, ɵprefijo hense , pero así es como el equipo de Angular lo usa también en sus propios paquetes.

En mi caso, obtuve la URL de la imagen antes de llegar al componente de visualización y quiero usarla como imagen de fondo, así que para usar esa URL tengo que decirle a Angular que es segura y que se puede usar.

En archivo .ts

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

En archivo .html

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