Búsqueda de sitios web

typescript - ADVERTENCIA: se está sanitizando un valor de estilo inseguro url

Quiero establecer 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 si la imagen de fondo CSS dinámica está siendo bloqueada debido a restricciones de seguridad en Angular 2 o si mi plantilla HTML está rota.

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

ADVERTENCIA: se está sanitizando un valor de estilo inseguro url(SafeValue debe usar [property]=binding: /img/path/is/correct.png (ver http://g.co/ng/security#xss)) (ver http://g.co/ng/security#xss).

La cuestión es que sí saneo lo que se inyecta en mi plantilla usando el DomSanitizationService en 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 simplemente enlazo con la plantilla utilizando [src]="imagen", por ejemplo:

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

y image se pasó usando bypassSecurityTrustUrl, todo parecía funcionar bien... ¿alguien puede ver qué estoy haciendo mal?

Respuesta #1

Tienes que envolver toda la declaración url en el bypassSecurityTrustStyle:

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

Y tener

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

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

Respuesta #2

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

Respuesta #3

Si imagen de fondo con degradado lineal (*ngFor)

Ver:

<div [style.background-image]="getBackground(product.img)">
</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})`);
}

Respuesta #4

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

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

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

Ahora en tu etiqueta de imagen html, puedes escribir así.

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

Puedes escribir según tu requerimiento en lugar de item.imageUrl

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

Respuesta #5

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

  1. en el código SafePipe, sustituye DomSanitizationService por DomSanitizer

  2. proporcione el SafePipe si su NgModule

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

Artículos relacionados